一、为什么要清浮动?
当有嵌套关系的元素时, 父元素的高度应该由子元素撑开,
元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住
实例
实例
.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(块级格式化上下文)