CSS清除浮动的用途及方法

最新推荐文章于 2023-08-15 23:01:41 发布

Zaralike

最新推荐文章于 2023-08-15 23:01:41 发布

阅读量209

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/Zaralike/article/details/119707888

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

应用场景一

未添加浮动：

添加浮动后（想让3位于1，2下面）：

*{
    margin:0;
    padding:0;
}
.container{
    border:1px solid black;
}
.first{
    background:yellow;
    width:100px;
    height:100px;
    float:right;
}
.second{
    background:green;
    width:100px;
    height:100px;
    float:right;
}
.third{
    background:pink;
    clear:right;/*清除浮动*/
}

<body>
<div class="container">
<div class="first">first</div>
<div class="second">second</div>
<p class="third">third</p>
</div>
</body>

应用场景二（父盒子高度坍塌）

未添加浮动：

添加浮动后：

*{
    margin:0;
    padding:0;
}
.container{
    border:1px solid black;
}
.first{
    background:yellow;
    width:100px;
    height:100px;
    float:right;
}
.second{
    background:green;
    width:100px;
    height:100px;
    float:right;
}
.clear{
    clear:both;  /*清除浮动*/
}

<body>
<div class="container">
<div class="first">first</div>
<div class="second">second</div>
<div class="clear"></p>  <!--清除浮动-->
</div>
</body>

清除浮动的方法：

（1）额外标签法（隔墙法）

在最后一个浮动盒子的后面新建一个盒子用于并对它清除浮动。（如上应用场景2代码所示）

优点：通俗易懂，方便书写
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素（如：span就不行）

（2）父级添加overflow（溢出隐藏解决浮动的塌陷问题）

原理：overflow:hidden/auto/scroll触发BFC(块级格式化上下文)，则用bfc规则去渲染页面，因此浮动的元素也参与计算高度

给父级添加overflow，将其属性值设置为hidden/auto/scroll。
优点：代码简洁
缺点：无法显示溢出部分

（3）after伪元素法（给父元素添加）

.clearfix::after{
    content:"";
    display:block;  /*伪元素默认行元素，block clear:both才会生效*/
    clear:both;
}

.clearfix::after{
       content:"";
       display:block;
       height:0;
       clear:both;
       visibility:hidden;
}
/*IE6、7专有*/
.clearfix{
     *zoom:1;
}

<body>
<div class="container clearfix">
<div class="first">first</div>
<div class="second">second</div>
</div>
</body>

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

(4)双伪元素法（使用before和after来清除浮动）

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

优点：代码更简洁缺点：照顾低版本浏览器

总结

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	结构化较差
父级overflow: hidden	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	兼容性问题
父级双伪元素	结构语义化正确	兼容性问题

Zaralike

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS清除浮动的用途及方法

应用场景一未添加浮动：添加浮动后（想让3位于1，2下面）：*{ margin:0; padding:0;}.container{ border:1px solid black;}.first{ background:yellow; width:100px; height:100px; float:right;}.second{ background:green; width:100px; .
复制链接

扫一扫