当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离。

将会无法撑起父元素的高度，导致父元素的高度丢失。

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

针对高度塌陷，可以采取多种方法避免。

BFC(Block Formatting Context) 块级格式化环境

- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC

开启BFC该元素会变成一个独立的布局区域

- 元素开启BFC后的特点：

1.开启BFC的元素不会被浮动元素所覆盖

2.开启BFC的元素子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

- 可以通过一些特殊方式来开启元素的BFC：

1、设置元素的浮动（不推荐）

2、将元素设置为行内块元素（不推荐）

3、将元素的overflow设置为一个非visible的值

- 常用的方式 为元素设置 overflow:hidden 开启其BFC 即使其可以包含浮动元素

如图所示，未开启BFC，box2的margin-top:100px，使box1也向下移动，而开启BFC之后，则显示正常。

这个是我们在开发过程中常遇到的问题，有时候我们习惯系列overflow: hidden;,但是可能不知道是什么意思。

学习CSS相关的理论知识，对于整体布局的理解以及后续的面试都会有所帮助。