前端高度塌陷问题及解决方法

什么是高度塌陷？

对于一个未设置宽、高父元素，其高度是被子元素撑开的。当其子元素设置浮动后，会脱离文档流，从而父元素无法被子元素撑开，失去高度，导致父元素及其后续元素会自动上移，造成页面布局混乱。

解决方法

1、将父元素的宽、高设置固定值
2、开启BFC
3、在浮动子元素的后面添加一个空白的div元素，并清除此元素两侧的浮动。

4、利用**:after伪类**，将父元素的最后设为块元素并清除此元素两侧的浮动。(最佳方案)
.box1:after{
display:block;
clear:both;
content:“”;//添加空内容
}

什么是BFC

BFC的全称是“Block Formatting Context”，是W3C标准中规定的，页面中每个元素都具备的一个隐藏属性。开启BFC后，元素将会具备以下特性：
1、父元素的垂直外边距不会和子元素重叠
2、可以包含浮动的子元素
3、不会被浮动元素覆盖

如何开启BFC？

1、父元素设置浮动
和浮动的子元素一起脱离文档流，高度会被撑开，但后续元素仍会自动上移，影响页面布局

2、父元素设置绝对定位
后续元素仍会自动上移，影响页面布局

3、父元素设置inline-block属性
父元素高度会被撑开，后续元素不会上移，但父元素宽度丢失。

4、父元素设置overflow为非visiable属性
最好设置为overflow:hidden