学习清除浮动的四种方法（笔记）

最新推荐文章于 2022-07-19 17:05:50 发布

北极兴

最新推荐文章于 2022-07-19 17:05:50 发布

阅读量162

点赞数

分类专栏：清除浮动文章标签：清除浮动

本文链接：https://blog.csdn.net/qq_23376917/article/details/80610287

版权

清除浮动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、额外标签法

在最后一个浮动元素的末尾添加一个空标签，如<div style="clear: both;"></div>.

二、父级添加overflow属性方法

如标题所示。给父级元素添加overflow属性，并设置为hidden、scroll或是auto都行，一般设置为hidden。

三、使用after伪元素清除浮动

给父级元素添加类名clearfix， clearfix的代码如下：

/* 正常浏览器 */
.clearfix:after {
	display: block;
	content: '';
	clear: both;
	height: 0;
	visibility: hidden;
}
/* ie6、ie7浏览器 */
.clearfix {
	*zoom: 1;
}

四、使用before和after双伪元素清除浮动

给父级元素添加类名clearfix， clearfix的代码如下：

/* 正常浏览器 */
.clearfix::before, .clearfix::after {
	display: table;
	content: '';
}

.clearfix::after {
	clear: both;
}

/* ie6、ie7 */
.clearfix {
	*zoom: 1;
}