CSS学习笔记－清除浮动

前言

在工作中网页的布局基本使用float来处理，但是浮动所带来的副作用又是比较麻烦的一件事，今天写下这篇笔记来梳理一下。

正文

为什么要清除浮动

浮动:元素使用浮动之后会脱离文档流，左右移动直到浮动元素的外边缘碰到到他的父元素的边框或者碰到另一个浮动元素的边框，浮动的这个性质会影响网页的布局，例如：

• 造成父元素的高度塌陷

当包含左列和右列的父元素的高度小于浮动的子元素时,父元素的高度没有被撑开。

• 影响块级元素中的文本

对于黄色div来说，浮动的粉色div是不影响他的布局的，黄色div就像不存在粉色div一样呈现自己的布局，但是对于黄色div中的文字来说受到了浮动元素的影响。

因为浮动会造成以上之类的布局问题,所以在使用float之后,我们要清除浮动。

清除浮动的几种方法

• 父元素也设置float:left。

这种方式比较简单,但是作为父容器来说设置了float同样会影响他相邻元素的布局,所以这种方法并不可取。

• 浮动元素后面加一个任何标签然后样式设置clear:both;

        
左列,设置float:left
        
右列,设置float:left
        

        #content{
            width:1000px;
            background:#ddd;
            border:3px solid red;
        }

        .left{
            float:left;
            width:300px;
            height:60px;
            background:pink;
        }

        .right{
            float:left;
            width:300px;
            height:60px;
            background:yellow;
        }

        .clear{
            clear:both;
        }

效果图:

这种方式同样是比较简单，但是缺点是增加了许多无意义的标签，不利于维护。

• 浮动元素后面加一个
  

该方法与上一个浮动元素后面加一个任何标签然后样式设置clear:both类似,也产生无语义化的标签。

• 包裹浮动元素的父元素使用overflow:hidden和overflow:auto

        #content{
            width:1000px;
            background:#ddd;
            border:3px solid red;
            overflow:hidden; //overflow:auto;
            *zoom:1;//IE6中出发hasLayout
        }

这种方法的优点是不存在语义化的问题，缺点是一些情况下可能会产生滚动条或者内容被隐藏了。

• 使用after伪元素

        #content:after{
            content:"";
            display:block;
            clear:both;
        }

IE6中不支持after,可以使用

        #content{
            *zoom:1;//出发hasLayout
        }

这是目前采取的最常用的一种方法,相比以上有缺陷的几种做法,使用伪元素after比较保险。

结尾

几种清除浮动的方式具体情况具体分析，当包含浮动元素的父元素本身就有float或者overflow等需求设置时，可以不必采用伪元素等方式设置, 今天先到这里, 明天继续。