解决高度塌陷问题

1：什么是高度塌陷：

一般情况下父元素是不设置高度的，让其被内容自动撑开。如果子元素设置了浮动，子元素会脱离文档流就不能撑开父元素的高度，从而导致高度塌陷。导致页面布局的混乱。

2：解决方案

（1）给父元素设置高度，

一般情况下不推荐使用，比较容易出bug。

（2）给元素开启BFC

BFC：块级格式化上下文，元素的隐含属性，一般情况下不开启。开启BFC之后相当于把元素隔离开来成为一个独立的区块，不影响页面的其他元素。

特点：一旦元素开启BFC，父元素的垂直外边距就不会和垂直外边距重叠（解决父子外边距重叠的问题），开启BFC的元素不会被浮动元素覆盖，开启BFC的元素可以包裹住浮动的元素（解决高度塌陷的问题）

如何开启BFC：设置元素浮动（可以解决高度塌陷但会宽度丢失，脱离文档流，页面布局混乱没解决）、设置将元素转成行内块元素（高度塌陷问题解决，但是多了三像素问题，宽度丢失，也一定程度上影响页面布局）、利用overflow样式非默认值（visible）（auto、scroll(自动生成滚动条) （hidden 推荐使用））（可以解决高度塌陷问题，最大程度不影响页面布局，副作用相对较小，建议使用）、设置绝对定位（副作用和设置浮动一模一样，不推荐使用）

（3）结合clear样式解决高度塌陷

有时会希望清除其他元素对当前元素的影响

clerr

可选值：none 默认值，不清除浮动

left 清除左侧浮动对当前元素的影响

right 清除右侧浮动对当前元素的影响

both 清除影响较大的浮动对当前元素的影响

解决高度塌陷：在高度塌陷的父元素最后添加一个块元素，由于块元素没有浮动所以它可以撑开父元素，没有副作用。但页面结构中会多出一个不必要的结构，推荐使用伪类

（4）结合clear、伪类，解决高度塌陷

最推荐使用，在父元素的后面结合伪类before，after，记得转成块元素或者表格（display：'table';），

content:'';

display：block;/display：'table';(可以同时解决高度塌陷和父子垂直外边距问题)

clear：both;

这样页面中没有多余的结构，也没有副作用。