根源:常规流块盒在计算高度时会无视浮动盒子
产生条件:
没有固定高度 的父元素里有浮动元素 时就可能会出现高度坍塌,让原本属于自己的高度没有计算到自己的高度之内。这里分为几种情况,均为个人的理解:
- 子元素全为浮动元素时,会出现高度坍塌的现象
- 当子元素为常规流块盒和浮动元素并在同一行时
- 如果浮动元素的高度小于块盒的高度,那么不会出现高度坍塌;
- 如果浮动元素的高度大于块盒高度时就会发生高度坍塌。
- 当子元素为常规流块盒和浮动元素并不再同一行时,也会出现高度坍塌。
解决方法:
给父元素固定高度
这个高度应该包含所有子元素,包括浮动元素
【适合高度固定的页面布局,不适合自适应布局】
清除浮动
- 在父元素结构的最后面添加一个 块盒(必须是块盒,浮动影响的是块盒),给添加的块盒设置clear声明
【会给结构多增加一个节点,影响渲染速度】
div{
clear:both;
}
- 给父元素添加伪元素after,把伪元素转换为块盒并添加clear声明
【属于万能清除法,并可以写到类选择器里简化代码,供多个元素使用】
.clearfix::after{
content:""; //内容为空
display:block; //必须转为块盒clear属性才能生效
clear:both; //清除浮动
}
触发父元素为BFC
- 让父元素浮动
【会影响和父元素同级的其他元素】
- 给父元素添加定位(绝对定位和固定定位)
【定位后会脱离文档流,会影响了页面布局】
- 给父元素添加声明overflow
overflow的值不可以是visible
【影响了自身功能】
- 更改父元素display属性值
display的值可以是 table-cell 、table-caption 、 inline-flex 、 flex
【会影响子元素的显示效果】
补充:
定位元素(绝对定位和固定定位)也会使父元素高度坍塌
因为绝对定位和固定定位也会使元素脱离文档流
解决方法只能给父元素设置足够高度