为什么需要清除浮动？清除浮动的方式

[ReinerLau1]

定义

• 容器不设高度且子元素浮动时，容器高度不能被内容撑开
• 内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）

[ReinerLau1]

原理

• 浮动元素脱离文档流，不占据空间
• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

[ReinerLau1]

浮动引起的问题

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

[ReinerLau1]

清除浮动

• 给父级 div 定义height属性
• 最后一个浮动元素之后添加一个空的 div 标签，并添加clear:both样式
• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
• 使用:after伪元素

.clearfix:after{
    content: "\200B";
    display: table;
    height: 0;
    clear: both;
}