清除浮动

为什么要清除浮动？
在前端网页布局的时候，为了使元素居左或者居右常常需要用到浮动float属性，浮动的框可以左右移动直到碰到外边缘框或者遇到另一个浮动框。浮动框会脱离文档流，浮动框内的元素布局不会受影响，但是当子元素设置了float而父元素没有其他正常文档流中的元素的时候，父元素的宽高会变为0，子元素将支撑不了父元素，而正常文档流中的元素布局就会表现得浮动宽不存在一样，这种情况就是“高度塌陷”。

不设置浮动：

<div class="contain">
        <div class="box1"></div>
        <div class="box2"></div>
</div>
<div class="box3"></div>


.contain {
	background-color: black;
}
.box1 {
	width: 100px;
	height: 100px;
	background-color: red;
}
.box2 {
	width: 100px;
	height: 100px;
	background-color: green;
}
.box3 {
	width: 100px;
	height: 100px;
	background-color: yellow;
}

其中容器contain虽然没有设置宽高，但是其子元素设置了宽高将父元素的宽高给撑起来了

容器中的子元素设置浮动

<div class="contain">
        <div class="box1"></div>
        <div class="box2"></div>
</div>
<div class="box3"></div>


.contain {
	background-color: black;
}
.box1 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: red;
}
.box2 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: green;
}
.box3 {
	width: 100px;
	height: 100px;
	background-color: yellow;
}

此时父元素容器因为子元素浮动脱离了文档流而失去了高度，正常文档流中的box3后面显示

若将box3的宽度设置为600可以更加清除明白

所以为了使布局正常显示，我们需要清除浮动使得父元素的高度能被撑起来，方法有以下几种：

1、添加空白div盒子属性clear:both

在父元素容器中添加空白的div盒子，并设置属性clear:both
clear属性：left / right / both 可以清除一侧或者两侧属性

<div class="contain">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="clear"></div>
 </div>
<div class="box3"></div>


.contain {
	background-color: black;
}
.box1 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: red;
}
.box2 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: green;
}
.clear {
	clear: both
}
.box3 {
	width: 300px;
	height: 100px;
	background-color: yellow;
}

2、添加空白盒子增加父元素的padding

通过设置padding给浮动元素留有一定空间使布局正常显示

<div class="contain">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="clear"></div>
</div>
<div class="box3"></div>


.contain {
	background-color: black;
	
}
.box1 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: red;
}
.box2 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: green;
}
.clear {
	padding-top: 100px;
}
.box3 {
	width: 300px;
	height: 100px;
	background-color: yellow;
}

3、给父级元素设置overflow:hidden

（利用BFC清除浮动）

<div class="contain">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="clear"></div>
</div>
<div class="box3"></div>


.contain {
	background-color: black;
	overflow:hidden
}
.box1 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: red;
}
.box2 {
	width: 100px;
	height: 100px;
	float: left;
	background-color: green;
}
.clear {
}
.box3 {
	width: 300px;
	height: 100px;
	background-color: yellow;
}