Advantages of clear in CSS

In the DIV + CSS design webpage, you often need to set multiple divs to be arranged in parallel, usually Using Float: Left or float: Right, but the problem arises, the total width of multiple divs in the current side is less than 100%. The DIV below is likely to be raised up, and it is in the same row as the DIV in the previous row. This is not the expected result. The clear attribute can solve this problem. The following describes the help:

CSS clear attributes

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.
When image and text elements appear in other elements, they (images and text) can be called floating elements ). The clear attribute can be used to prevent other floating elements from appearing on the edge of an element.

Note:This property does not always work as expected if it is used along with the "float" property.
Note:When this attribute is used with the "float" attribute, the results may be unsatisfactory.

Inherited:No
Inheritance:None

Available Value

Value	Description
Left	No floating elements allowed on the left side Float elements on the left of an element are not allowed.
Right	No floating elements allowed on the right side Float elements are not allowed on the right of an element.
Both	No floating elements allowed on either the left or the right side No floating element is allowed on both sides of the element.
None	Allows floating elements on both sides Allow floating elements on both sides

 

Example

<Style type = "text/CSS">

. Lefttext {
Margin: 3px;
Float: left;
Height: 180px;
Width: 170px;
Border: 1px solid # b1d1ce;
Background-color: # f3f3f3;
}

. Foottext {
Height: 180px;
}

. Clear
{
Clear: both;
}
</Style>

<Div class = "lefttext"> Block 1 </div>
<Div class = "lefttext"> Block 2 </div>
<Div class = "clear"> </div>
<Div class = "foottext"> block 3 </div>

CodeNote:

If the layer is not clear, block 3 is tied to block 2 in the same row.
After the clear layer is added, the effects of the above floating Div will be cleared so that it will not affect the layout of the following Div