【面试常考】CSS清除浮动

话不多说，咱直接开门见山吧！

清除浮动的方式：

（1）利用clear属性

对不想进行浮动的元素上添加clear属性，值根据情况可设置为left,right,both

// HTML代码
<div class="pra">
	<div class="child1">child1</div>
	<div class="child2">child2<div>
</div>

//CSS代码
.pra {
	position: relative;
	...
}
.child1 {
	float: left;
	...
}
//child2清除浮动
.child2 {
	clear: left;
	...
}

（2）利用clearfix伪类

在父元素上添加一个clearfix类，然后这样定义：

// HTML代码
<div class="top clearfix">
	<div class="child">child1</div>
	<div class="child">child2<div>
</div>
<div class="bottom">bottom</div>


//CSS代码
.clearfix:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
}

（3）在父元素闭合标签结束之前添加清除浮动的块级元素

// HTML代码
<div class="top">
	<div class="child">child1</div>
	<div class="child">child2<div>
	<div class="clearfix"></div>
</div>
<div class="bottom">bottom</div>


//CSS代码
.clearfix {
	clear: both;
}

（4）利用BFC清除浮动

// HTML代码
<div class="top">
	<div class="child">child1</div>
	<div class="child">child2<div>
</div>
<div class="bottom">bottom</div>

//CSS代码
.top{
	 overflow: auto;
	 ...
}
.child {
	float:left;
	...
}
.bottom {
	clear: both;
	...
}

你的点赞是对我最大的鼓励，笔芯