Clear floats before and after the element

Question

I have a number of elements that are float: left; Each other. Ideally, I would like to clear the float on both sides of one element with one class, without adding the other to clear: left; after non-floating element.

An example where .one-line should be in its own line.

How I do it now with two classes.

I feel this should be done without a few classes. Any ideas?

Answer 1

It seems dirty to me, but it does what you want (and even works in IE8). Adding a field to the same class will stop something from floating to the right and force them to move to the next line.

 .one-line { clear: both; margin-right:100%; } 

JsFiddle example

Answer 2

give it margin-right 100%

 .button { width: 50px; height: 50px; background-color: lightblue; margin: 10px; border-radius: 60px; float: left; } .one-line { clear: both; margin-right:100%; }