浮动与清除浮动总结

最新推荐文章于 2023-07-12 20:30:13 发布

Teal-code

最新推荐文章于 2023-07-12 20:30:13 发布

阅读量202

点赞数

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

本文链接：https://blog.csdn.net/weixin_43198324/article/details/106628001

版权

4 篇文章 0 订阅

订阅专栏

浮动与清除浮动

浮动=左浮动+右浮动
浮动会使块元素脱离标准流，可以让多个块在同一行显示，下方的标准流盒子会上浮到给了浮动的盒子下面

.类名 {
	float:left；、
}

当布局需要多个块级元素需要一行显示的时候可以使用浮动
在开发过程中我们经常将其定义在common.css中，其定义如下

.fl {
	float: left;
}
.fr {
	float: right;
}

在同级多个元素需要浮动的时候，直接在类里写即可

在浮动影响页面布局的时候就需要清除浮动，如在父亲元素没有定义高度并且子元素使用了浮动的情况下，下方的元素会浮上来，这样就影响了页面的布局，此时就需要清除浮动了

写法一：直接使用clear，此方法不推荐使用

.clearfix:after{
	content:"";
	height:0;
	line-height:0;
	display:block;
	visibility:hidden;
	clear:both;
	}
/* 为了兼容IE */
.clearfix{
	zoom:1;
}

写法二：双伪类元素法

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

写法三：使用overflow清除浮动，

.clearfix {
	/* overflow: hidden;同理 */
	overflow: auto;
	zoom: 1;
}

写法四：直接使用clear，此方法不推荐使用

.clear {
 clear: both;
}

关注