Menu
I happened to see a div which had the style clear:both! What is the use of clear in style?
<div style="clear:both"> 
438
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.
The clear property is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element which is floated, it will.
Clearing Floats The footer should sit below both the sidebar and main content. To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both .
Purpose of clearing floats in CSS: We clear the float property to control the floating elements by preventing overlapping. On our webpage, if an element fits horizontally next to the floated elements, unless we apply the clear property same as float direction then the elements will be a move below the floated elements.
clear:both makes the element drop below any floated elements that precede it in the document.
You can also use clear:left or clear:right to make it drop below only those elements that have been floated left or right.
+------------+ +--------------------+ | | | | | float:left | | without clear | | | | | | | +--------------------+ | | +--------------------+ | | | | | | | with clear:right | | | | (no effect here, | | | | as there is no | | | | float:right | | | | element) | | | | | | | +--------------------+ | | +------------+ +---------------------+ | | | with clear:left | | or clear:both | | | +---------------------+ Just to add to RichieHindle's answer, check out Floatutorial, which walks you through how CSS floating and clearing works.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
