高度坍塌的产生条件和解决方法

根源：常规流块盒在计算高度时会无视浮动盒子

产生条件：

没有固定高度 的父元素里有浮动元素 时就可能会出现高度坍塌，让原本属于自己的高度没有计算到自己的高度之内。这里分为几种情况，均为个人的理解：

• 子元素全为浮动元素时，会出现高度坍塌的现象
  
• 当子元素为常规流块盒和浮动元素并在同一行时

1. 如果浮动元素的高度小于块盒的高度，那么不会出现高度坍塌；
2. 如果浮动元素的高度大于块盒高度时就会发生高度坍塌。

• 当子元素为常规流块盒和浮动元素并不再同一行时，也会出现高度坍塌。

解决方法：

给父元素固定高度

这个高度应该包含所有子元素，包括浮动元素

【适合高度固定的页面布局，不适合自适应布局】

清除浮动

• 在父元素结构的最后面添加一个 块盒（必须是块盒，浮动影响的是块盒），给添加的块盒设置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

【会影响子元素的显示效果】

补充：

定位元素（绝对定位和固定定位）也会使父元素高度坍塌

因为绝对定位和固定定位也会使元素脱离文档流

解决方法只能给父元素设置足够高度