php里清除浮动代码,清除浮动的五种方式 - 20190429

一、为什么要清浮动?

当有嵌套关系的元素时, 父元素的高度应该由子元素撑开，

元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住

实例

实例

.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(块级格式化上下文)