淺談css中浮動(dòng)和清除浮動(dòng)帶來的影響

發(fā)布時(shí)間：2017-08-14 14:56:16 作者：中尉、

這篇文章主要介紹了淺談css中浮動(dòng)和清除浮動(dòng)帶來的影響，通過代碼示例和圖片展示詳細(xì)介紹講解了浮動(dòng)的應(yīng)用和實(shí)現(xiàn)效果,需要的朋友可以參考下

有很多時(shí)候，我們都會(huì)用到浮動(dòng)，而我們有時(shí)候?qū)Ω?dòng)只是一知半解，卻不是太清楚它到底是怎么回事，不知道各位有沒有和我一樣的感覺，只知道用它，卻不知道它到底是怎么回事，所以，在學(xué)習(xí)的過程中，就要把一個(gè)概念不是很清晰的問題把它弄清楚了，便于我們以后的使用。早些時(shí)候，W3C規(guī)定出來的浮動(dòng)實(shí)際并不是為了布局所用，當(dāng)時(shí)是為了做文字環(huán)繞才使用到浮動(dòng)，后來有人發(fā)現(xiàn)用它來做布局也挺不錯(cuò)啊，但是，用到了浮動(dòng)，是要付出一定的代價(jià)的，我們就必須要處理浮動(dòng)所帶來的影響。接下來我們就聊聊浮動(dòng)的那些事兒，此分享僅供參考，有什么不足的地方希望各位博友指正！

首先我們要知道，css中的塊級(jí)元素在頁面中是獨(dú)占一行的，自上而下排列，也就是我們所說的流，通常我們稱之為標(biāo)準(zhǔn)流，在這里我以div為例，div是塊級(jí)元素，如下圖。

可很清楚的看得到，div是獨(dú)自占用一行的，div2和div3是不會(huì)排在div1后面，這是在標(biāo)準(zhǔn)流中的理論，但是，有些時(shí)候，我們的需求不僅僅是這樣，我們想著如何在一行中顯示多個(gè)div元素，所以，標(biāo)準(zhǔn)流已經(jīng)不能滿足我們的需求，這個(gè)時(shí)候我們就需要用到浮動(dòng)，我們這樣理解，浮動(dòng)就是讓這個(gè)div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流的上面。現(xiàn)在，我給div2加上一個(gè)向左的浮動(dòng)，給個(gè)fload：left；然后來看看會(huì)發(fā)生什么，看圖吧，上效果低千言萬語！

如圖可以看出，黃色的div不見了，其實(shí)它并不是不見了，而是跑到了綠色盒子的下面，這個(gè)時(shí)候我們就要想到了，因?yàn)槲覀兘o了div2向左浮動(dòng)，div2已經(jīng)脫離了標(biāo)準(zhǔn)流，相當(dāng)于它已經(jīng)和黃色盒子、紅色盒子不在一個(gè)層次上，所以，黃色盒子就會(huì)頂上去跑到綠色盒子的下面，占據(jù)著綠色盒子的位置，就是我們現(xiàn)在看到的效果。好，理解了上面的，讓我們接著來，現(xiàn)在我給黃色盒子和綠色盒子都加上左浮動(dòng)，再看看效果：

現(xiàn)在我們看到div2和div3都脫離的標(biāo)準(zhǔn)流，此時(shí)，div3發(fā)現(xiàn)div2也是浮動(dòng)的，所以div3就會(huì)跟隨著div2之后，而div2發(fā)現(xiàn)上邊的元素div1是標(biāo)準(zhǔn)流中的元素，因此div2的相對(duì)垂直位置不會(huì)改變，頂部仍然和div1元素的底部對(duì)齊，由于是左浮動(dòng)，所以，左邊的div2在最左邊。
接下來我們來看看不同的：
如果我把div2和div3都設(shè)置成右浮動(dòng)的話，看圖如下：

現(xiàn)在我們可以看到，div2和div3都漂浮到了最右邊。但是有一點(diǎn)我們可以發(fā)現(xiàn)，因?yàn)槭窍蛴腋?dòng)，右邊是最前，所以div2會(huì)第一個(gè)向右浮動(dòng)，div3隨著緊跟div后面向右浮動(dòng)，這個(gè)時(shí)候就很容易的理解了，由于div1是在標(biāo)準(zhǔn)流上，它是獨(dú)自占用一行的，所以div2和div3不會(huì)跑到上面去。

為了方便理解，讓我們?cè)倏匆粋€(gè)例子，如圖：

現(xiàn)在我有四個(gè)div，現(xiàn)在他們分別沒有浮動(dòng)，都在標(biāo)準(zhǔn)流里，每個(gè)div獨(dú)占一行，現(xiàn)在我給div2和div4分別加一個(gè)左浮動(dòng)，然后給div3增加50px的寬度，便于理解，來看看效果：

現(xiàn)在我們可以很好的理解上面的效果了，div2和div4都是左浮動(dòng)的，先來理解div2 ，div2由于有左浮動(dòng)，脫離了標(biāo)準(zhǔn)流，它發(fā)現(xiàn)div1是標(biāo)準(zhǔn)流里的元素，所了垂直位置不變，然后，div3發(fā)現(xiàn)div2是浮動(dòng)的，它和我不在一個(gè)流中了，所以它的位置就空了，所以div3就頂了上去，現(xiàn)在來理解div4，div4也是向左浮動(dòng)的，首先它看到div3向上頂了上去，所以div4也就跟著頂上，然而它是浮動(dòng)的，但是它發(fā)現(xiàn)div3是標(biāo)準(zhǔn)流中的元素，所以它的垂直位置也不會(huì)有變化，如果沒有div3的話，它的位置會(huì)緊跟div2的后面向左浮動(dòng)的。
好了，只要理解了上面的東西，大概的浮動(dòng)問題基本都可以解決了，不管頁面多復(fù)雜，我們的初衷就是想讓多個(gè)div或者是多個(gè)li標(biāo)簽在一行中顯示，便于我們的布局需求，然而，滿足我們的需求了，就會(huì)帶來一些影響，就是浮動(dòng)帶來的影響，所以，我們?cè)谟玫剿臅r(shí)候就要去解決浮動(dòng)所帶來的影響，也就是傳說中的清除浮動(dòng)。
首先，讓我們來看看浮動(dòng)會(huì)帶來什么影響：
第一種：現(xiàn)在我有三個(gè)div，都屬于標(biāo)準(zhǔn)流中，獨(dú)占一行，如圖所示：

然而，現(xiàn)在我的需求變了，我想讓div1的右邊是div2也就是讓它們兩個(gè)在同一行，然而div3的位置還是在下面，這個(gè)時(shí)候我們要是用到浮動(dòng)了，給div1和div2添加一個(gè)向左浮動(dòng)，就會(huì)出現(xiàn)問題，如圖所示:

問題就是div3發(fā)現(xiàn)它前面的兩個(gè)div都脫離了標(biāo)準(zhǔn)流了，那也就是說它上面沒有東西了，那我是不是應(yīng)該頂上去，然而，這并不是我們想要的效果對(duì)吧，所以，現(xiàn)在我們就需要清除浮動(dòng)了。清除浮動(dòng)有三種種方法，在這里我先說第一種：
隔墻法，也就是在需要清除浮動(dòng)的元素前面添加一個(gè)空的div，因?yàn)樗鼪]有瀏覽器默認(rèn)樣式，沒有特殊功能，而且一般不會(huì)被css樣式化，所以這種方法也是比較常見和常用的方法。
現(xiàn)在，也就是在div3前面添加一個(gè)空的div，給這個(gè)div添加一個(gè)css屬性，clear：both；代碼如下：

    .clearfix{
        clear: both;
    }
</style>
<body>
  <div class="box1">div1</div>
  <div class="box2">div2</div>
  <div class="clearfix"></div>
  <div class="box3">div3</div>
</body>

這樣的話就起到了清除浮動(dòng)的效果，也就是讓div3待在浮動(dòng)元素的下面。效果如圖：

現(xiàn)在我們來看看浮動(dòng)給我?guī)淼?strong>第二種影響：
現(xiàn)在看看我的HTML是怎么寫的：

<style>
    .box{
        background-color: yellow;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

來，先看看現(xiàn)在的效果：

大家注意，現(xiàn)在我是沒有給外面的div高度的寬度的，我只是給了它的背景顏色是黃色，這種情況很容易理解嘛，因?yàn)樗淖釉匕阉鼡伍_了嘛，那現(xiàn)在我的需求變了，我想讓div1和div2在同一行排列，那么，現(xiàn)在我就給div1和div2添加一個(gè)向左浮動(dòng)，來看看會(huì)有什么效果:

注意了，現(xiàn)在div1和div2都有了向左浮動(dòng)，脫離了標(biāo)準(zhǔn)流，我們發(fā)現(xiàn)，原本外面包裹的div不見了，不理解的人這時(shí)候就很納悶了，可能你在用的時(shí)候不會(huì)注意到，也有可能當(dāng)時(shí)需求不一樣，所以不能注意到這點(diǎn)，它是怎么回事呢，因?yàn)閐iv1和div2都脫離了標(biāo)準(zhǔn)流，所以外面包裹的div沒有支撐的東西，也就是所謂的高度塌陷，那么，我們并不想讓它呈現(xiàn)出這種效果，所以這個(gè)時(shí)候就要清楚浮動(dòng)了，這里我就說第二種清楚浮動(dòng)的方法，overflow方法，在父元素上設(shè)置overflow這個(gè)屬性，如果父元素的這個(gè)屬性設(shè)置為auto或者是hidden，父元素就會(huì)擴(kuò)展包含浮動(dòng)，這個(gè)方法有著比較好的語義性，因?yàn)樗恍枰~外的元素，但是，要記住一點(diǎn)，overflow屬性不是為了清除浮動(dòng)而定義的，要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動(dòng)條。
現(xiàn)在我就給外面的div添加overflow：hidden，或者是auto，
代碼如下：

<style>
    .box{
        background-color: yellow;
         overflow:atuo;     //或者是hidden
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

看看效果吧：

現(xiàn)在外面的div是不是又出來了。
不同的情況就需要不同的浮動(dòng)清除辦法，現(xiàn)在來說說第三種清除浮動(dòng)的方法:
就是利用偽類元素來清除有浮動(dòng)的標(biāo)簽，也就定義一個(gè)公共的類clearfix，給這個(gè)類添加css屬性，在里面進(jìn)行清除浮動(dòng)的操作，光說沒用，直接看代碼吧：

.clearfix:after{
    content:"";
    display:table;
    height:0;
    visibility:both;
    clear:both;
}
.clearfix{
*zoom:1;    /* IE/7/6*/
}

這里把它寫成公共的樣式，只要哪里需要清除浮動(dòng)，就在哪里添加一個(gè)清除浮動(dòng)的類，比如上面的例子，我就給外面包著的div添加clearfix這個(gè)類，可以達(dá)到和上面同樣的效果。這種方式這樣理解，就是利用偽類元素，也就是在有浮動(dòng)的標(biāo)簽前面添加一個(gè)塊級(jí)元素，來達(dá)到效果。
代碼如下：

<style>
       .clearfix:after{
    content:"";
    display:table;
    height:0;
    visibility:both;
    clear:both;
}

.clearfix{
*zoom:1;    /* IE/7/6*/
}

</style> 

<body>
<div class="box clearfix">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

以上就是我分享的css中的浮動(dòng)和清除浮動(dòng)所帶來的影響，如有不足的地方，還請(qǐng)各位博友斧正！謝謝大家！希望大家繼續(xù)支持腳本之家~~~