高度塌陷与 BFC

1. 高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

clear作用：清除浮动元素对当前元素所产生的影响（本质是为元素添加一个margin-top属性，值由浏览器自动计算）
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中影响较大一侧元素的影响（注意，这里不是同时清除两侧的影响）

hidden等可以为元素开启 BFC(有一定的弊端和隐患)

元素::after{
content:'';
clear:both;
display:block;
}

元素::before{
content:'';
display:table
}

元素::before,
元素::after {
content: "";
display: table;
clear: both;
}

高度塌陷问题，一般用::after
外边距重叠问题，一般用::before