【CSS】清除浮动的五种方式

清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式

 

*首先要明确的是，为什么要清除浮动？

A 影响其他元素定位

父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面

 

B 背景图片或颜色不能正常显示

由于浮动产生，如果对父级设置了CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

 

C margin padding设置受到影响

由于浮动导致父子盒子之间设置的padding margin不能正常表达，特别是上下的padding margin。

 

 

1  给父级盒子定义高度

原理：父级div手动定义高度，就决绝了父盒子无法自动获取到高度的问题，简单有效代码少

缺点：只适合高度固定的布局。

 

2   结尾处加上空div标签 clear:both

原理：在浮动元素的后面加上空div元素，利用css提供的clear:both清除浮动，让父盒子自动获取高度。

缺点：如果页面浮动较多，就要写n个空标签，会扰乱代码。

 

3  **最佳拍档** 使用伪类 父盒子:after 和 zoom

        .clearFlo:after{
            content: '';
            height: 0;
            display: block;
            visibility: hidden;
            line-height: 0;
            clear: both;
        }

        .clearFlo{
            zoom: 1;
        }

 

原理：IE8+支持，:after原理和方法2有点类似，zoom是IE专有属性，可以解决6/7浮动问题，所以这是一个比较好的解决办法，推荐使用公共雷鸣，以减少css代码

 

4 父盒子定义overflow:hidden

缺点：超出盒子部分会被隐藏，不推荐使用。

 

5 双伪元素法

        .clearfix:before, .clearfix:after{
            content: ' ';
            display: table;
        }

        .clearfix:after{
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }

 

原理：通过:after伪类在浮动元素后面加上display:table的不可见内容块，并给它设置clear:both来清除浮动。

 

总结：

第一种方法：简单，容易掌握，但只适合高度固定的布局，不推荐使用可以了解。

第二种方法：简单，浏览器支持好，但如果页面浮动布局多，就要增加很多空div，让人感觉很麻烦，不推荐使用，可以了解。

第三种方法：浏览器支持好,建议使用。

第五种方法：浏览器支持好,建议使用。