ReactJS: How to make <div/> float not affect the next <div/>?

Question

I currently have:

<div style={{float:'left'}}>Left</div>
<div style={{float:'right'}}>Right</div>
<div>Below</div>

I was able to get Left and Right to be on the opposite ends like intended on the same line, but the Below is also affected, and floats to the left, right next to Left, even though float has not been defined for it.

So I was wondering how to keep Below on the next line, without being affected by the previous floats?

Solution 1

You should clear the last div. Try this:

<div style={{clear:'both'}}>Below</div>

Solution 2

Have you tried clearing that last div?

clear: both