为什么要清除浮动？

最新推荐文章于 2024-01-19 22:39:36 发布

原创最新推荐文章于 2024-01-19 22:39:36 发布 · 664 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了清除浮动的方法，特别是使用after伪元素来解决因子元素浮动导致的父元素高度塌陷问题。通过具体实例，展示了如何利用clearfix类和IE6-7兼容性解决方案，确保布局正确且语义化。

为什么要清除浮动？

是为了解决父元素因为子元素浮动而引起的内部高度为0的问题。
布局：

<body>
<div class="father">
    <div class="big">盒子1</div>
    <div class="small">盒子2</div>
    大盒子
</div>
</body>

样式：

<style>
    .father{
        border: 1px solid darkred;
        width: 400px;
    }
    .big{
        width: 100px;  height: 100px;
        background-color: orangered;
    }
    .small{
        width: 50px;  height: 50px;
        background-color: mediumpurple;
    }
</style>

在这里插入图片描述
盒子1和2都设置浮动后
.big, .small{
float: left;
}
解决方法
使用after伪元素清除浮动（推荐使用）

// 先给父元素增加一个类名 clearfix ，然后在样式中添加如下内容
.clearfix:after{
display: block;
content: ‘’;
clear: both;
visibility:hidden; // 允许浏览器渲染，但不显示出来，这样才能实现清除浮动。
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式， 号只有IE6-IE7执行，其他浏览器不执行/
}
优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素 :after，使用zoom:1触发hasLayout。

4.使用before和after双伪元素清除浮动

.clearfix:after, .clearfix:before{
content: “”;
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}