高度塌陷和BFC

高度塌陷问题以及如何用BFC解决高度塌陷问题

1、高度塌陷问题
在浮动布局中，父元素的高度默认是被子元素撑开的（如果不写父元素高度）
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法称其父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱
所以高度塌陷是浮动布局中比较常见的问题，这个问题必须处理

解决办法：
BFC(Block Formatting Context) 块级格式化环境
- BFC 是css中的一个隐含属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域，和其它块不同
- 元素开启BFC的特点
1、开启BFC的元素，不会被浮动元素覆盖
2、开启BFC的元素，子元素和父元素的外边距不会重叠
3、开启BFC的元素，可以包含浮动的子元素，不会高度塌陷
可以通过特殊方式，开启元素BFC
1、设置元素浮动 （不推荐，会从文档流脱离）
float:left;
2、将元素设置为行内块元素（不推荐）
display:inline-block
3、将元素的overflow设置为非visible的值
常用方式：
overflow:hidden 开启BFC