清除浮动的方式

为什么要清除浮动

浮动元素脱离了标准文档区域，位于其他元素上方，导致代码中浮动元素后面的其他元素会隐藏在浮动元素后面，网页显示错乱

---

 

一、给父元素设置固定高度

缺点：使用不灵活，后期不易维护

应用：网页中盒子固定高度区域，比如固定的导航栏

二、内墙法（了解）

使用规则：在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear:both;

缺点：结构冗余

三、伪元素（选择器）清除

语法：定义类名：clearfix

类名+两个冒号+after

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

四、 overflow:hidden;

在父元素添加属性 overflow:hidden; 形成BFC区域

BFC区域有这样一条规则：计算BFC区域（块级盒子）的高度时，浮动元素也参与计算

形成BFC的条件：除了overflow:visitable（继承属性）这个属性外，overflow的其他属性都可以形成BFC区域

 

---

 补充：

哪些元素会生成BFC

1、根元素

2、float属性不为none

3、position属性为absolute或fixed

4、display属性为inline-block

5、overflow属性不为visible