清除盒子浮动

最新推荐文章于 2022-09-03 11:07:41 发布

zst123q

最新推荐文章于 2022-09-03 11:07:41 发布

阅读量179

点赞数 1

分类专栏：笔记文章标签： css html css3

本文链接：https://blog.csdn.net/zst123q/article/details/110100596

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了清除浮动的四种常见方法：额外标签法、父级添加overflow属性、父级添加after伪元素以及父级添加双伪元素。分别阐述了每种方法的实现原理、优点和缺点，并举例说明其在实际应用中的差异。这些方法广泛应用于网页布局中，以解决浮动元素引起的问题。

摘要由CSDN通过智能技术生成

怎样清除盒子浮动？
1.额外标签法：例如

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

2.父级添加 overflow 属性
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
例如：
overflow:hidden | auto | scroll;
优点：代码简洁
缺点：无法显示溢出的部分
注意：是给父元素添加代码

3.父级添加after伪元素
:after 方式是额外标签法的升级版。给父元素添加：
.clearfix:after {
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

4父级添加双伪元素
给父元素添加：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等