浮动与清除浮动

2017-04-30 本文已影响0人薛普定朗谔克

原文地址：浮动与清除浮动

浮动

浮动的概念

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

float：left | right | none | inherit

举个栗子:

当框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，框2填补了它的位置且被覆盖，使框 2 从视图中消失。
如果把所有三个框都向左浮动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

浮动的特性

脱离文档：元素设置为浮动后脱离文档流，并不占据空间，而此浮动元素在文档流空出的位置，由后续的非浮动元素填充，块级元素直接填充上去，内联元素则有空隙就插入。
浮动可以内联排列：浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，类似于inline-block属性的效果。
父元素高度坍塌：浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

清除浮动

清除浮动的概念

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
举个栗子：
html：

    <div class="out">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>

css：

    .out{
        width: 300px;
        border: 2px solid #55a532;
    }
    .box{
        background-color: #f7c942;
        height: 50px;
        width: 50px;
    }

上面是未设置浮动时的效果，下面我们给容器里面的子元素设置向左浮动：

    .box{
        background-color: #f7c942;
        height: 50px;
        width: 50px;
        float: left;
    }

我们可以看到，子元素设置浮动后父元素只剩下了重合后的边框，这是因为元素脱离了文档流，不能撑开父元素，所以父元素的高度坍塌了，而子元素也溢出到容器外面，这就是浮动溢出现象。要消除这个现象就得清除浮动。

清除浮动的方法

方法一：添加带clear属性的空元素

clear 属性规定元素的哪一侧不允许其他浮动元素。

    clear ：left | right | both | none | inherit

我们给浮动元素后面添加一个空元素

    <div class="out">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="none"></div>
    </div>

给空元素设置clear属性

    .none{
        clear: both;
    }

原理是设置clear后，父容器必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了

另外，如果浮动元素后面存在着不浮动的块元素，那么直接给后者添加clear: both属性即可，不必添加空元素多此一举。

方法二：after伪元素

after伪元素可以在父容器的尾部自动创建一个子元素，也就是说我们不必修改html，可以直接通过css来添加新元素，达到跟上一种方法同样的效果。

     .out:after {
             content: "";
             display: block;
             height: 0;
             clear: both;
         }   
     .out{
            zoom: 1;
        }

content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用，本例content: ""表示给父元素结尾放了一个空白字符。
after添加的内容默认是inline元素，但是行内元素会找空隙插入浮动元素，依然撑不起父容器高度，所以我们需要把插入的元素设置成块元素block。
height: 0是让这个这个空白字符不显示出来。
由于IE6不支持after，我们添加一条IE6的独有命令"zoom:1"就行了，这条命令的作用是触发父元素的"hasLayout"属性（即令hasLayout的值为true），让父元素拥有自己的布局，IE6会读取这条命令，其他浏览器则会直接忽略它。（haslayout为true时，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容，例如浮动，而zoom:1是最常用，最安全，成本最少的触发hasLayout的方式。）

方法三：父元素设置overflow: auto/hidden

给浮动元素的父元素添加overflow: auto或者overflow: hidden属性之后会自动计算超出的大小，所以父容器会自动撑开自己把所有的子元素放进去，浮动元素也回到了容器层，达到了清理浮动的效果。但是如果子元素的大小超过父容器的大小，就会出现显示问题,不推荐使用。

    .out{
        overflow: auto;
        zoom: 1;          /*处理ie6兼容问题*/
    }

方法四：父元素设置浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，也容易出现新的浮动问题，不推荐使用。

    .out{
        float: left;
    }

方法五：父元素设置display:table

将父容器变成表格可以清除浮动，但是非表格内容用table来装，不符合标签语义化要求，还可能会出现未知问题，故不推荐使用。

    .out{
        display: table;
    }

小结

据说浮动诞生的时候主要是用来实现文字围绕图片的效果，但是后来越来越多的人用它来布局，虽说存在的即合理的，用浮动布局确实有它的道理和好处，但是对我来说，我还是不太喜欢用浮动来布局，绝对定位也是一样，他们总给我一种不安全感，让我觉得我的页面不是一个整体，随时都有可能崩坏。总之打好基础才是做出一个稳定页面的前提，道阻且长。