清除浮动的方法

katy perry

已于 2022-12-08 10:06:30 修改

阅读量70

点赞数

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

于 2022-07-26 11:19:32 首次发布

本文链接：https://blog.csdn.net/m0_51865787/article/details/125990767

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

本文探讨四种清除CSS浮动的方法：1）固定高度的局限性；2）使用clear:both和空标签的缺点；3）伪元素::after实现纯CSS解决方案；4）利用BFC原理的overflow属性。推荐采用伪元素方法，遵循结构与样式分离原则。

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

方法一：给父元素设置固定高度

扩展性不好（不推荐）

方法二：在父元素最后增加一个空的块级子元素，并且让他设置为clear:both

会增加很多无意义的空标签，维护麻烦
违反了结构与样式分离的原则（不推荐）

方法三：伪元素清除浮动

给父元素增加::after伪元素
纯CSS样式解决，结构与样式分离（推荐）

.clear-fix::after{
	content:"";
	display:block;
	clear:both;
	visibility:hidden; /* 浏览器兼容性 */
	height:0 /* 浏览器兼容性 */
}
.clear-fix {
	*zoom:1; /* IE6/7兼容性 */
}
## 方法四： 利用BFC清除浮动
给父元素加overflow:auto/scroll/hidden