清除浮动的各种方法

最新推荐文章于 2025-09-05 08:42:59 发布

原创最新推荐文章于 2025-09-05 08:42:59 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #浮动 #CSS

CSS 专栏收录该内容

1 篇文章

订阅专栏

一、浮动的定义及效果

网页开发写CSS时常见的就是浮动，那浮动的定义是什么呢，一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。也就是说浮动元素会脱离文档流并尽量向左/向右浮动，直到碰到它的父元素或者另一个浮动元素。浮动后的元素会有以下的效果：
浮动会脱离文档流，尽量向左或向右移动，后面的元素会随文档流补上。
浮动可以实现多个块级元素分布在一行的布局，既像内联元素一样呈现出来，又可以设置宽高；
由于浮动会使元素脱离文档，所以其父元素高度为0，也就是高度坍塌。

二、清除浮动的方法

由于浮动会像上面所说的，影响到浮动元素的父元素和后面的元素，那就需要清除浮动来解决这些问题。
方法一：设置父元素的高度
计算包含浮动子元素的父元素高度，直接解决高度坍塌的问题。

方法二：设置额外的空元素
在包含浮动元素后面，增加额外的空元素，设置 clear: both ，clear属性的值也可以是left， right。
但是这种做法会添加无意义的元素不利于维护。
//css
.parent{
	border: 1px solid #f00;
}
.child{
        float: left;
	width: 50px;
	height: 50px;
	margin: 5px;
	border: 1px solid #00f;
}
.clear{
	clear: both;
}
//html
<div class="parent">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="clear"></div>
</div>
方法三：使用：after选择器
在包含浮动子元素的父元素上使用 :after 选择器生成内容清除浮动。
//css
.parent{
	border: 1px solid #f00;
}
.child{  
        float: left;
	width: 50px;
	height: 50px;
	margin: 5px;
	border: 1px solid #00f;
}
.clearfix:after{
	content:"";
	display:block;
	clear:both;
}
.clearfix{
	zoom:1;
}/*兼容IE*/
//html
<div class="parent clearfix">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
</div>
方法四：利用overflow: hidden
这种方法使得父元素包裹住子元素，解决了高度坍塌问题，但是溢出的内容会被隐藏。
//css
.parent{
	border: 1px solid #f00;
        overflow: hidden;
}
.child{  
        float: left;
	width: 50px;
	height: 50px;
	margin: 5px;
	border: 1px solid #00f;
}
//html
<div class="parent">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
</div>
方法五：浮动父元素
给父元素增加 float属性，而不用去清除子元素的浮动。但是产生了新的浮动，对后面元素会有影响。
方法六：设置父元素display: table
直接改变了盒模型的属性，可能产生未知问题。