清除浮动的几种方法

清除浮动

盒子高度问题

1. 在标准流中内容的高度可以撑起盒子的高度（父元素div被撑起来）

   
   

2. 在浮动流中浮动元素内容的高不可以撑起盒子的高（父元素红色背景的div并没有被撑起来）

   
   

---

清除浮动方式⑴

给前面的父盒子添加高度——

在企业开发中能不写高度就不写高度, 所以这种方式 不推荐 。

【 添加高度前 】

【 添加高度后】

    

        
伊利丹
        
瓦斯琪
        
凯尔萨斯
    


    

        
安度因
        
瓦莉拉
        
拉希奥
    

---

清除浮动方式⑵

利用clear:both;属性清除前面浮动元素对我的影响 ——

margin属性会失效, 所以这个方式也 不推荐 。

【 添加 clear:both; 前 】

【 添加 clear:both;后 及时css中已经设置margin 但未生效 】

   

        
伊利丹
        
瓦斯琪
        
凯尔萨斯
    


    

        
安度因
        
瓦莉拉
        
拉希奥
    

---

清除浮动方式⑶

在两个有浮动子元素的盒子之间添加一个额外的块级元素 （外墙法） ——

• 在外墙法中可以通过设置额外标签的高度来实现margin效果；
• 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以 不推荐 。

【 添加额外块级元素前 】

【 添加额外块级元素后 】

    


   

        
伊利丹
        
瓦斯琪
        
凯尔萨斯
    




    

        
安度因
        
瓦莉拉
        
拉希奥
    

---

清除浮动方式⑷

在前面一个盒子的最后添加一个额外的块级元素 （内墙法） ——

• 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性；
• 和外墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。所以依然 不推荐 。

【 添加额外块级元素前 】

【 添加额外块级元素后 】

    

    

        
伊利丹
        
瓦斯琪
        
凯尔萨斯
    
    
    




    

        
安度因
        
瓦莉拉
        
拉希奥
    

---

清除浮动方式⑸

给前面的盒子添加 overflow:hidden属性 ——

缺点是和定位结合在一起使用时会有冲突

• overflow:hidden的作用是清除溢出盒子边框外的内容；
• IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个zoom:1；

【 添加overflow:hidden;前 】

【 添加overflow:hidden;后 】

    

    

        
伊利丹
        
瓦斯琪
        
凯尔萨斯
    


    

        
安度因
        
瓦莉拉
        
拉希奥
    

---

清除浮动方式⑹

给前面的盒子添加伪元素来清除浮动（推荐用法） ——

• 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素；
• 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性。

【 添加伪元素前 】

【 添加伪元素后 】

    

        
伊利丹
        
瓦斯琪
        
凯尔萨斯
    


    

        
安度因
        
瓦莉拉
        
拉希奥
    

---

清除浮动方式⑺

给前面的盒子添加双伪元素来清除浮动（推荐用法） ——

• 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
• 不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。

【 添加伪元素前 】

【 添加伪元素后 】

    

        
伊利丹
        
瓦斯琪
        
凯尔萨斯
    


    

        
安度因
        
瓦莉拉
        
拉希奥