How to cleverly use CSS clear: both to clear floats (with code)

When laying out the page, float is often used, and the float will inevitably be cleared. This article will tell you how to skillfully use clear:both to clear the float. Friends in need can refer to it. ,Hope it helps you!

When we use div css or xhtml css in making web pages, we will encounter some very strange situations. The layout is obviously correct, but the whole picture is confused. Sometimes it looks normal under IE6. When I look at it under IE7 or Firefox, it's a mess. No matter how I calculate it, I just can't correct the layout. In fact, all this is caused by floating, which is float in CSS. To solve the problem, you need to use clear: both.

The CSS manual explains this: The value of this property indicates the side on which floating objects are not allowed. This attribute is used to control the physical position of the float attribute in the document stream.

When the attribute is set to float (float), its physical location is already out of the document flow, but most of the time we hope that the document flow can recognize float (float), or we hope that float (float) The following elements are not affected by float. At this time, we need to use clear: both; to clear.

Program code:

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

If there is no need to clear the float, then the text in the 3rd column will be together with the text in the 1st and 2nd columns, so we add a clear float in the 3rd column clear:both;

Usually, we tend to define a separate CSS style for "clear float", such as:

Program code

.clear {
clear: both;
}

Then use < div class="clear">

to specifically "clear floats".
However, some people disagree that you don’t need to write

and just clear it directly in the lower layer.
For example, the originally good

program code

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>

must be transformed into

program code

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<div class="clear"></div>
<p>这个是第3列。</p>

From this point of view, < ;div class="clear">