1、开启父元素的BFC
Block Formating Context 块级格式化环境
开启BFC后元素具有的特性:父元素的垂直外边距不会与子元素重叠,开启BFC的元素不会被浮动元素所覆盖但可以包含浮动子元素;
开启方式:设置元素浮动/设置元素绝对定位/设置元素的类型为inline-block/设置overflow非默认值,如
overflow:hidden
2、在塌陷父元素的最后加一个空白的div,然后对该div清除浮动
<div style:"clear:both"></div>
3、在浮动元素的父元素上添加伪类
.clearfix:: after {
content: "";
display: block;
clear: both;
}
4、子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素
.clearfix:: before {
.clearfix:: after {
content: "";
display: table
clear: both;
}