高度塌陷
父块级元素的子元素都开启了BFC，导致不能撑开父级元素，而造成高度塌陷。在一个div里，有2个p标签，p标签都设置了浮动，div就会出现高度塌陷。
BFC
**bfc块格式化上下文，**是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
浮动定位和清除浮动及外边距重叠
此处引用MDN:块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
常见的创建bfc的方式如下：
- ** 根元素‘HTML’**
- ** 行内块元素（元素的 display 为 inline-block）**
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
- ** 元素（元素的 float 不是 none）**
- ** overflow 值不为 visible 的块元素 **
- 绝对定位元素（元素的
position为absolute或fixed）
解决高度塌陷方法
1. 使用带clear属性的空元素(必须是块级元素)
在两浮动元素下，新添一个元素，用以撑开父级元素的宽度，再清除之前的左右浮动，向下移动,用以撑开高度。
.clear_both { clear: both; }
<div class="container">
<p class="left">floatrightfloatrightfloatrightfloatright，floatrightfloatright</p>
<p class="right">只读分支：任何人都无法推送代码（包括管理员和所有者），需要推送代码时应设为“常规”或“保护”分支</p>
</div>
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
2. overflow属性
给浮动元素的容器添加overflow属性，属性值不为默认，如hidden，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
原理请点击此处：overflow清除浮动原理。
.container {background-color: antiquewhite; border: steelblue 1px solid;overflow: hidden;zoom: 1; }
3. 给浮动元素的容器添加浮动
给浮动元素的容器也添加浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
4. 使用css伪元素after
原理通第一个空元素的方法类似。
.container {background-color: antiquewhite; border: steelblue 1px solid;}
.container::after {content: "";display: block;clear: both;}
建议使用css伪元素after解决高度塌陷问题，副作用少，便于维护,但浏览器兼容性一般。
