CSS之浮动元素影响清除方法归纳

前言

浮动是CSS的三种基本定位机制之一，在现在网页的DIV+CSS基本布局中，无论是两列布局，三列布局，多列布局，还是混合型布局，浮动几乎无处不在。浮动机制使用很简单，只需要设置元素的float属性即可，使用也很广泛，无论网页的大布局，还是网页中小模块的排版，都可以轻松使用这种机制方式进行CSS样式设置完成想要的排版效果，但浮动机制有一个问题，就是浮动的元素会脱离文档流，并且对紧邻它之后的不浮动元素和它的父元素有影响，一不小心就会导致后续布局排版错乱，所以必须要在设置浮动之后对其他可能会受影响的元素做清理。
我对浮动元素导致父元素受影响后的清理的处理方法做了自己的一些简单归纳，下面通过自己的一个简单示例进行分析说明。

示例的html代码：

    



    

        
            ![](images/people.jpg)
        
        

            雨，像银灰色黏湿的蛛丝，织成一片轻柔的网，网住了整个秋的世界。天也是暗沉沉的，像古老的住宅里缠满着蛛丝网的屋顶。那堆在天上的灰白色的云片，就像屋顶上剥落的白粉。在这古旧的屋顶的笼罩下，一切都是异常的沉闷。园子里绿翳翳的石榴、桑树、葡萄藤，都不过代表着过去盛夏的繁荣，现在已成了古罗马建筑的遗迹一样，在萧萧的雨声中瑟缩不宁，回忆着光荣的过去。草色已经转入忧郁的苍黄，地下找不出一点新鲜的花朵；宿舍墙外一带种的娇嫩的洋水仙，垂了头，含着满眼的泪珠，在那里叹息它们的薄命，才过了两天的晴美的好日子又遇到这样霉气薰薰的雨天。只有墙角的桂花，枝头已经缀着几个黄金一样宝贵的嫩蕊，小心地隐藏在绿油油椭圆形的叶瓣下，透露出一点新生命萌芽的希望。
            　　雨静悄悄地下着，只有一点细细的淅沥沥的声音。桔红色的房屋，像披着鲜艳的袈裟的老僧，垂头合目，受着雨底洗礼。那潮湿的红砖，发出有刺激性的猪血的颜色和墙下绿油油的桂叶成为强烈的对照。灰色的癞蛤蟆，在湿烂发霉的泥地里跳跃着；在秋雨的沉闷的网底，只有它是唯一的充满愉快的生气的东西。它背上灰黄斑驳的花纹，跟沉闷的天空遥遥相应，造成和谐的色调。它噗通噗通地跳着，从草窠里，跳到泥里，溅出深绿的水花。 　　雨，像银灰色黏濡的蛛丝，织成一片轻柔的网，网住了整个秋的世界。 --张爱玲
        
    

css代码：

    * {
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 700px;
        margin: 10px auto;
        background-color: darkgray;
        border: 10px dotted #333;
    }
    
    .left-img {
        float: left;
        width: 177px;
        border: 5px dotted burlywood;
    }
    
    .right-paragraph {
        float: right;
        width: 500px;
        border: 5px dotted dodgerblue;
    }

示例在网页上的效果截图：

示例效果图.png

父容器container中包含一张图片以及一段文字，其中父元素仍在普通的文档流中，而图片设置左浮动，文本p设置右浮动，两个元素均脱离了文档流。所以受子元素浮动设置的影响，其中父元素中相当于没有任何元素，在未设置固定高度的情况下无法撑开，默认内容高度为0。
这种css样式设置在布局中很常见，但如果父元素无法撑开，在父容器之后的元素布局可能会因此出现位置的排版错乱。这种效果往往不是我们所需要的。我们更期待的布局效果是，父元素无需设置固定高度，而是根据其中子元素的最大高度来撑开父元素的高度，即父元素height=子元素中高度最大值。
本身普通文档流中css样式布局可自动父元素会根据其子元素的最高值撑开相应高度，但由于子元素均浮动导致脱离文档流的影响，父元素只能通过方法进行清理浮动元素的影响。

清理之后实现的效果图

期望效果图.png

清理方法思路解析

1. 在父容器的最后一个子元素的下面添加一个空元素并且清理它

代码展示：

    

        
            ![](images/people.jpg)
        
        

            
        
        

    

这种方式会添加多余的不必要的代码。

2. 选择浮动父容器

代码展示：

.container {
        float: left;
    }

但下一个元素会受到这个浮动元素的影响。

3. 设置父容器的属性overflow等于hidden或auto

代码展示：

.container {
        overflow: hidden;
        /*overflow: auto;*/
    }

overflow属性定义在包含的内容对于指定的尺寸太大的情况下元素应该怎么样。在默认的情况下，内容会溢出到框外，进入相邻的空间。应用值为hidden或auto的overflow属性有一个有用的副作用，这会自动地清理包含的任何浮动元素。但这个方法并不适合所有的情况，因为设置框的overflow属性会影响他的表现。更具体来说，这种方法在某种情况下会产生滚动条或截断内容。

4. 使用CSS方法时结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容

代码展示：

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

        
            ![](images/people.jpg)
        
        

            雨，像银灰色黏湿的蛛丝，织成一片轻柔的网，网住了整个秋的世界。天也是暗沉沉的，像古老的住宅里缠满着蛛丝网的屋顶。那堆在天上的灰白色的云片，就像屋顶上剥落的白粉。在这古旧的屋顶的笼罩下，一切都是异常的沉闷。园子里绿翳翳的石榴、桑树、葡萄藤，都不过代表着过去盛夏的繁荣，现在已成了古罗马建筑的遗迹一样，在萧萧的雨声中瑟缩不宁，回忆着光荣的过去。草色已经转入忧郁的苍黄，地下找不出一点新鲜的花朵；宿舍墙外一带种的娇嫩的洋水仙，垂了头，含着满眼的泪珠，在那里叹息它们的薄命，才过了两天的晴美的好日子又遇到这样霉气薰薰的雨天。只有墙角的桂花，枝头已经缀着几个黄金一样宝贵的嫩蕊，小心地隐藏在绿油油椭圆形的叶瓣下，透露出一点新生命萌芽的希望。
            　　雨静悄悄地下着，只有一点细细的淅沥沥的声音。桔红色的房屋，像披着鲜艳的袈裟的老僧，垂头合目，受着雨底洗礼。那潮湿的红砖，发出有刺激性的猪血的颜色和墙下绿油油的桂叶成为强烈的对照。灰色的癞蛤蟆，在湿烂发霉的泥地里跳跃着；在秋雨的沉闷的网底，只有它是唯一的充满愉快的生气的东西。它背上灰黄斑驳的花纹，跟沉闷的天空遥遥相应，造成和谐的色调。它噗通噗通地跳着，从草窠里，跳到泥里，溅出深绿的水花。 　　雨，像银灰色黏濡的蛛丝，织成一片轻柔的网，网住了整个秋的世界。 --张爱玲
        
    

这个方法在IE6以及更低版本中不起作用。

以上大概就是几种清理方式的简单归纳，大家可以根据自己的实际使用场景和局限进行选择。