清除浮动的三种方法

最新推荐文章于 2022-02-28 17:18:39 发布

邀月°

最新推荐文章于 2022-02-28 17:18:39 发布

阅读量133

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Maca_Baca/article/details/114728698

版权

24 篇文章 0 订阅

订阅专栏

**问题的原因：**在CSS规范中，浮动定位不属于正常的文档流，是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。
解决方法：
1.在浮动元素的下面加一个空的div,并为他清除浮动。

<div class="wrap">
   <div class="float">浮动</div>
   <div class="clear" style="clear:both"></div>
   <div class="nofloat">不想被浮动影响</div>
</div>

PS：这种情况比较适合元素之间是垂直排列布局的，为了不受彼此浮动的影响。
2.在父元素和不想被浮动影响的子元素上加overflow

<div class="wrap" style="overflow:hidden">
   <div class="float">浮动</div>
   <div class="nofloat" style="overflow:hidden">不想被浮动影响</div>
</div>

3.使用：after伪元素，给浮动元素的父元素清除浮动
html

<div class="wrap clearfix">
   <div class="float">浮动</div>
</div>

css

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:'clear';
    height:0;
    display:block;
    clear:both;
}

"display: block; clear: both;"是确保空白是非浮动的独立区块。

以下来源于百度文库
注：zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。不过值得注意的一点就是火狐浏览器不支持zoom属性，但是在webkit内核浏览器中zoom这个属性也是可以被支持的。

关注