Marusya's School Notes

Clear Property

The clear property is used to control the behavior of floating elements. Elements after a floating element will flow around it. To avoid this, use the clear property. This property specifies on which sides of an element, floating elements are not allowed to float:

HTML file:	Displayed by browser:
<style> .div1 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #8AC007; } .div2 { border: 1px solid red; } .div3 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #8AC007; } .div4 { border: 1px solid red; clear: left; } </style> <body> <h2>Without clear</h2> <div class="div1">DIV1</div> <div class="div2">DIV2 - Notice that the DIV2 element is after DIV1, in the HTML code. However, since DIV1 is floated to the left, this happens: the text in DIV2 is floated around DIV1, and DIV2 surrounds the whole thing.</div> <h2>Using clear</h2> <div class="div3">DIV3</div> <div class="div4">DIV4 - Using clear moves DIV4 down below the floated DIV3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div> </body>	Without clear DIV1 DIV2 - Notice that the DIV2 element is after DIV1, in the HTML code. However, since DIV1 is floated to the left, this happens: the text in DIV2 is floated around DIV1, and DIV2 surrounds the whole thing. Using clear DIV3 DIV4 - Using clear moves DIV4 down below the floated DIV3. The value "left" clears elements floated to the left. You can also clear "right" and "both".

HTML file:

Displayed by browser:

<body>
<h2>Without clear</h2>
<div class="div1">DIV1</div>
<div class="div2">DIV2 - Notice that the DIV2 element is after DIV1, in the HTML code. However, since DIV1 is floated to the left, this happens: the text in DIV2 is floated around DIV1, and DIV2 surrounds the whole thing.</div>

<h2>Using clear</h2>
<div class="div3">DIV3</div>
<div class="div4">DIV4 - Using clear moves DIV4 down below the floated DIV3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</body>

Without clear

DIV1

DIV2 - Notice that the DIV2 element is after DIV1, in the HTML code. However, since DIV1 is floated to the left, this happens: the text in DIV2 is floated around DIV1, and DIV2 surrounds the whole thing.

Using clear

DIV3

DIV4 - Using clear moves DIV4 down below the floated DIV3. The value "left" clears elements floated to the left. You can also clear "right" and "both".