一、为什么要清浮动?
当有嵌套关系的元素时, 父元素的高度应该由子元素撑开，
元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住
实例
<!--<div class="parent" style="border: 2px solid; float: left;">--> <div class="box1"> <div class="box2"></div> <!--<div class="clear"></div>--> </div> <!--</div>-->
实例
.box1 {
width: 300px;
border: 5px dashed red;
}
.box2 {
width: inherit;
height: 300px;
background-color: lightblue;
}
/*浮动后脱离文档流, 父区块无法再包裹住*/
.box2 {
float: left;
}二、解决方案
Ⅰ父元素设置与子元一样的高度
注意：该方案非常Low,如果子元素高度变化,则必须同步修改父元素高度
实例
.box1 {
/*height: 300px;*/
} Ⅱ 父元素跟着子元素一起浮动
注意：如果父元素（box1）还有父元素,（parent） 那么也要添加float,一级一级往上走
实例
.box1 {
/*float: left;*/
} Ⅲ 添加一个块元素（clear）,专用来清浮动
注意：这个方案简单粗暴,但会多增加一个dom元素, 在服务器端渲染页面时, 会遇到些麻烦
实例
.clear {
/*clear: both;*/
} Ⅳ 父元素添加一个伪元素,专用来清浮动
思路：受方案Ⅲ提醒,既然不想添加一个多余的真实元素, 那就添加一个伪元素
实例
.box1::after {
/*content: '我是新增加的内容';*/
/*content: '\020';*/
/*content: '';*/
/*只要display是块就行,table,list-item...*/
/*display: table;*/
/*考虑到兼容性, 加个高度0,上个双保险,大多情况下可省略*/
/*height: 0;*/
/*clear: both;*/
}注意：content、display、clear缺一不可
Ⅴ 父元素添加overflower,专用来清浮动
实例
.box1 {
/*overflow: auto;*/
overflow: hidden;
}注意：此方案首选
三、BFC（块级格式化上下文）
