CSS：清除浮动（额外标签法、父级添加overflow、伪元素法、双伪元素法）

复制代码

   

       

       

       

   

   

       

           

           

           

           

           

       

       

       

   

复制代码

由于浮动元素不占有原来的文档流的位置，因此会对后面的元素的布局产生影响。

（2）需要清除浮动的情况

父级没有高度

子盒子浮动了

影响下面的布局了

2、浮动的清除

（1）属性值（clear）

right：清除左侧有浮动的元素

left：清除右侧有浮动的元素

both：左右侧都清除

（2）额外标签法：

也称为隔墙法，会在浮动元素的末尾添加一个空标签（必须是块元素），例如：

或者其他标签，例如：
等

复制代码

   

       

       

       

   

   

       

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

           

       

       

   

复制代码

此时，父盒子的高度会随子盒子的多少而改变，并且不会影响后面的布局。

（3）父级添加（添加overflow）

可以给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll

复制代码

   

       

       

       

   

   

       

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

   

       

       

   

复制代码

（4）伪元素法：

复制代码

   

       

       

       

   

   

       

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

   

       

       

   

复制代码

（5）双伪元素清除浮动（使用了before和after来清除浮动）：

复制代码

   

       

       

       

   

   

       

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

           

子元素

   

       

       

   

深圳网站建设www.sz886.com