Clear with floats?

Hi I’m just getting confused with what clear: left, right do and how I could use them in a site?

If I only had one float would I need to use clear:both or would use clear:left or ?

You can apply clear to an element if you don’t want it to appear next to a floated object. When cleared an element will appear below the float.

You might find the CSS Almanac here a handy reference for such questions:

(See https://css-tricks.com/almanac/properties/c/clear/ for this one specifically.)

That would depend on the objectives of your design.:slight_smile:

Generally you add clear:both to an element to stop it rising up alongside any floats that have been placed previously in the html. The clear can be applied to any block element including floats themselves if the need arises.

If you say clear:left to an element then any floats that are floated left will be cleared by the element you have applied the property to. Than means elements that have been floated to the right previously will still be wrapped by this element if the situation requires it. (and vice versa for clear:right).

Generally though you will be using clear:both as that is usually what you want.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.