CSS 清除浮动

• 清除浮动：浮动一定要封闭到一个盒子中，否则就会对后续页面产生影响。

清除浮动的方法

方法一

让内部有浮动的父盒子形成 BFC，它就能关闭内部的浮动。此时最好的方法就是 overflow: hidden 属性。如下图所示↓

方法二

给后面的父盒子设置 clear: both 属性。clear 表示清除浮动对自己的影响，both 表示左右浮动都清除。如下图所示↓

缺点：会使前一个 div 盒子的 margin 属性失效

方法三

使用 ::after 伪元素给盒子添加最后一个子元素，并且给 ::after 设置 clear: both 。如下图所示↓

注意：

• 伪元素要通过 display: block 转换为块级元素
• 常用类名：class="clearfix"

方法四

在两个父盒子之间“隔墙”，隔一个携带 clear: both 的盒子。如下图所示↓