如何在css中清除float

今天就跟大家聊聊有关如何在CSS中清除float，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

css中清除float的方法是，为父元素设置【overflow:auto】。设置之后，内容元素会被修剪，超出元素将不可见。我们还可以通过增加空标签，或者使用【:after】伪元素来清除float。

第一种方式：

增加一个空的标签（div 或 br等都行），通过clear：both语句消除float对后面元素的影响。

<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>

缺点：需要加很多无意义的标签，对后期维护不利。如果是小程序，那没关系，但如果是大工程，还是慎用。

第二种方式：使用:after 伪元素

.clearIt { zoom:1; }.clearIt:before;    .clearIt:after {    content:".";    display:block;     height:0;    visibility:hidden;     clear:both; }

第三种方式：

在父元素设置 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>

当父元素设置了overflow：auto之后，内容元素会被修剪，超出元素不可见。

这种方式的优点是不存在结构和语义化问题，代码量极少。但缺点也很严重，当内容增多时容易因为不会自动换行而导致内容被隐藏掉，无法显示需要溢出的元素。

其实只有clear：both是用来消除float的影响。其它的几种方式都是通过隐藏内容来达到自己的目的。

看完上述内容，你们对如何在css中清除float有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。