Prev Next

CSS Clear

The clear property ensures that no floated elements appear on the specified side of an element. For example, clear: both; moves the element below any previous floated elements, preventing overlap or wrap-around effects.

Key Topics

  • Clear Left, Right, or Both
  • Stopping Floated Elements from Overlapping

Example

After floating an image, use a <div style="clear: both;"></div> or a class to ensure subsequent content starts below the floated elements.

<img src="image.jpg" style="float:left;" alt="">
<p>Text wrapping around the floated image.</p>
<div style="clear:both;"></div>
<p>This paragraph starts below the floated image.</p>

Explanation: Clearing ensures the layout returns to normal, preventing elements from unexpectedly wrapping around floated items.

Key Takeaways

  • Layout Control: Clear stops floats from affecting subsequent content.
  • Simplicity: Add clear elements where you need to restore normal flow.
Prev Next