How to clear float in css

The way to clear float in css is to set [overflow:auto] for the parent element. Once set, the content element will be trimmed and the remaining elements will not be visible. We can also clear float by adding an empty tag or using the [:after] pseudo-element.

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

Let’s first talk about the purpose of clearing floats. Clearing floats is not the effect of clearing its own floats, but the effect of clearing the floats of the floating elements it touches so that the elements behind the floating elements will not accept them. Their floats are laid out according to the normal flow of elements.

Let’s introduce three ways to clear floats:

The first way:

Add an empty tag (div or br, etc. will do) ), eliminate the impact of float on subsequent elements through the clear: both statement.

<div class="main_left">.main{float:left;}</div>
<div class="side_left">.side{float:right;}</div>
<!--增加一个空标签-->
<div style="clear:both;"></div>
<div class="footer">.footer</div>

Disadvantages: A lot of meaningless tags need to be added, which is detrimental to later maintenance. If it's a small program, that's okay, but if it's a big project, use it with caution.

Second way: use: after pseudo-element

.clearIt { zoom:1; }
.clearIt:before;  
 /*加上before可以防止浏览器顶部的空白崩溃（就是上一个div的margin-bottom和下边的margin-top会发生叠加）*/
 .clearIt:after {
    content:".";
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; 
}
/*
display:block 使生成的元素以块级元素显示,占满剩余空间;
height:0 避免生成内容破坏原有布局的高度。
visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
zoom：1 触发IE hasLayout。
*/

Third way:

Set overflow: auto

<!--为父元素设置overflow-->
<div class="wrap"  style="overflow:auto;">
<div class="wrap_main_left">.main{float:left;}</div>
<div class="wrap_side_left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

on the parent element when the parent After an element is set with overflow:auto, the content element will be trimmed and will not be visible beyond the element.

The advantage of this method is that there are no structural and semantic problems, and the amount of code is very small. But the shortcomings are also very serious. When the content increases, it is easy to hide the content because it does not wrap automatically, and elements that need to overflow cannot be displayed.

In fact, only clear: both are used to eliminate the influence of float. Several other methods achieve their own goals by hiding content.

Related learning video sharing: css video tutorial

The above is the detailed content of How to clear float in css. For more information, please follow other related articles on the PHP Chinese website!