高度塌陷

父块级元素的子元素都开启了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解决高度塌陷问题，副作用少，便于维护,但浏览器兼容性一般。