如何清除浮动

清除浮动

背景

元素浮动会导致脱离文档流，高度塌陷等问题，因此在布局时应考虑清除浮动

清除浮动的方法

1. 在浮动元素的末尾添加一个空元素，设置此元素clear: both
2. 使用overflow-hidden 或者 overflow-auto 并且使用zoom: 1兼容IE浏览器
3. 直接给浮动元素后面相邻元素添加clear: both
4. 使用伪元素，给浮动元素的容器添加一个类名clearfix（推荐使用此方法）

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