整理自撩课学院（www.itlike.com）的视频

一、产生原因

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷

二、后果

父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱

三、解决办法

方案一：开启父元素的BFC

1、BFC是什么？

1.1 Block Formatting Context——块级格式化环境
1.2 BFC是元素的隐含属性，默认是在关闭状态的。可以通过一些特殊的样式，来开启BFC

2、开启BFC以后元素将会具有如下特性：

2.1 父元素的垂直外边距不会与子元素重叠
2.2. 开启BFC的元素不会被浮动元素所覆盖
2.3 开启BFC的元素可以包含浮动子元素

3、开启BFC的方式：

3.1 设置元素浮动
3.2 设置元素绝对定位
3.3 设置元素的类型为inline-block
3.4 设置overflow为一个非默认值，一般都是使用overflow:hidden来开启BFC ！最推荐！

方案二：添加元素

1、具体方式？

在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动

<div id="box1">
    <div id="box2"></div>
    <div style="clear:both"></div>
</div>

2、存在问题？

使用这种方式会在页面中添加多余的结构

3、什么是清除浮动？

clear可以用来清除其他浮动元素对当前元素的影响
可选值：
1、none，默认值，不清除浮动
2、left，清除左侧浮动元素对当前元素的影响
3、right，清除右侧浮动元素对当前元素的影响
4、both，清除两侧浮动元素对当前元素的影响

方案三：使用after伪类（最推荐）

使用after伪类，向父元素后添加一个块元素，并对其清除浮动。该种方式的原理和方法二原理一样，但是不用向页面中添加多于的结构。

.clearfix:after{
    content:"";
    display:block;
    clear:both;
}

完善高度塌陷

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素，可以在子元素前加上<table>标签

<div>
<table><table>
<div>子元素<div>
</div>

将它与clearfix:after结合，如下

.clearfix::before,
.learfix::after {
      content:'';
      display:table;
      clear:both;
}