[分享]css两侧清除浮动

CSS的浮动属性是网页布局中经常使用的重要属性，但是使得父元素无法自适应高度也是很常见的问题。解决这个问题可以使用清除浮动的方法，在CSS中有多种清除浮动的方式，本文主要介绍两侧清除浮动的方法。两侧清...

CSS的浮动属性是网页布局中经常使用的重要属性，但是使得父元素无法自适应高度也是很常见的问题。解决这个问题可以使用清除浮动的方法，在CSS中有多种清除浮动的方式，本文主要介绍两侧清除浮动的方法。

两侧清除浮动指的是在父元素中同时清除左浮动和右浮动，以达到自适应高度的效果。

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
} 

上述代码中，首先使用:before和:after伪元素，使得清除浮动的元素在文档中无痕迹。

然后在:after伪元素中使用clear:both属性清除左、右浮动，实现自适应高度。再在.clearfix选择器中使用zoom:1属性解决IE6及以下版本浮动问题。

使用时只需要为需要清除浮动的父元素添加clearfix类即可：

<div class="parent clearfix">
  <div class="child left"></div>
  <div class="child right"></div>
</div> 

这样，父元素就可以自适应高度了。

需要注意的是，如果父元素中存在浮动元素，那么这种清除浮动的方法可能会失效。此时需要在父元素中添加overflow:hidden;属性，或在父元素中添加清除浮动的子元素，即可解决此问题。