淺談css中浮動和清除浮動帶來的影響

時間 2019-11-18

標籤淺談 css 浮動清除帶來影響欄目 CSS 简体版

原文原文鏈接

有不少時候，咱們都會用到浮動，而咱們有時候對浮動只是只知其一;不知其二，卻不是太清楚它究竟是怎麼回事，不知道各位有沒有和我同樣的感受，只知道用它，殊不知道它究竟是怎麼回事，因此，在學習的過程當中，就要把一個概念不是很清晰的問題把它弄清楚了，便於咱們之後的使用。早些時候，W3C規定出來的浮動實際並非爲了佈局所用，當時是爲了作文字環繞才使用到浮動，後來有人發現用它來作佈局也挺不錯啊，可是，用到了浮動，是要付出必定的代價的，咱們就必需要處理浮動所帶來的影響。接下來咱們就聊聊浮動的那些事兒，此分享僅供參考，有什麼不足的地方但願各位博友指正！

首先咱們要知道，css中的塊級元素在頁面中是獨佔一行的，自上而下排列，也就是咱們所說的流，一般咱們稱之爲標準流，在這裏我以div爲例，div是塊級元素，以下圖。

可很清楚的看獲得，div是獨自佔用一行的，div2和div3是不會排在div1後面，這是在標準流中的理論，可是，有些時候，咱們的需求不只僅是這樣，咱們想着如何在一行中顯示多個div元素，因此，標準流已經不能知足咱們的需求，這個時候咱們就須要用到浮動，咱們這樣理解，浮動就是讓這個div元素脫離標準流，漂浮在標準流的上面。如今，我給div2加上一個向左的浮動，給個fload：left；而後來看看會發生什麼，看圖吧，上效果低千言萬語！

如圖能夠看出，黃色的div不見了，其實它並非不見了，而是跑到了綠色盒子的下面，這個時候咱們就要想到了，由於咱們給了div2向左浮動，div2已經脫離了標準流，至關於它已經和黃色盒子、紅色盒子不在一個層次上，因此，黃色盒子就會頂上去跑到綠色盒子的下面，佔據着綠色盒子的位置，就是咱們如今看到的效果。好，理解了上面的，讓咱們接着來，如今我給黃色盒子和綠色盒子都加上左浮動，再看看效果：

如今咱們看到div2和div3都脫離的標準流，此時，div3發現div2也是浮動的，因此div3就會跟隨着div2以後，而div2發現上邊的元素div1是標準流中的元素，所以div2的相對垂直位置不會改變，頂部仍然和div1元素的底部對齊，因爲是左浮動，因此，左邊的div2在最左邊。

接下來咱們來看看不一樣的：

若是我把div2和div3都設置成右浮動的話，看圖以下：

如今咱們能夠看到，div2和div3都漂浮到了最右邊。可是有一點咱們能夠發現，由於是向右浮動，右邊是最前，因此div2會第一個向右浮動，div3隨着緊跟div後面向右浮動，這個時候就很容易的理解了，因爲div1是在標準流上，它是獨自佔用一行的，因此div2和div3不會跑到上面去。

爲了方便理解，讓咱們再看一個例子，如圖：

如今我有四個div，如今他們分別沒有浮動，都在標準流裏，每一個div獨佔一行，如今我給div2和div4分別加一個左浮動，而後給div3增長50px的寬度，便於理解，來看看效果：

如今咱們能夠很好的理解上面的效果了，div2和div4都是左浮動的，先來理解div2 ，div2因爲有左浮動，脫離了標準流，它發現div1是標準流裏的元素，所了垂直位置不變，而後，div3發現div2是浮動的，它和我不在一個流中了，因此它的位置就空了，因此div3就頂了上去，如今來理解div4，div4也是向左浮動的，首先它看到div3向上頂了上去，因此div4也就跟着頂上，然而它是浮動的，可是它發現div3是標準流中的元素，因此它的垂直位置也不會有變化，若是沒有div3的話，它的位置會緊跟div2的後面向左浮動的。

好了，只要理解了上面的東西，大概的浮動問題基本均可以解決了，無論頁面多複雜，咱們的初衷就是想讓多個div或者是多個li標籤在一行中顯示，便於咱們的佈局需求，然而，知足咱們的需求了，就會帶來一些影響，就是浮動帶來的影響，因此，咱們在用到它的時候就要去解決浮動所帶來的影響，也就是傳說中的清除浮動。

首先，讓咱們來看看浮動會帶來什麼影響：

第一種：如今我有三個div，都屬於標準流中，獨佔一行，如圖所示：

然而，如今個人需求變了，我想讓div1的右邊是div2也就是讓它們兩個在同一行，然而div3的位置仍是在下面，這個時候咱們要是用到浮動了，給div1和div2添加一個向左浮動，就會出現問題，如圖所示:

問題就是div3發現它前面的兩個div都脫離了標準流了，那也就是說它上面沒有東西了，那我是否是應該頂上去，然而，這並非咱們想要的效果對吧，因此，如今咱們就須要清除浮動了。清除浮動有三種種方法，在這裏我先說第一種：

隔牆法，也就是在須要清除浮動的元素前面添加一個空的div，由於它沒有瀏覽器默認樣式，沒有特殊功能，並且通常不會被css樣式化，因此這種方法也是比較常見和經常使用的方法。

如今，也就是在div3前面添加一個空的div，給這個div添加一個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>

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

如今咱們來看看浮動給我帶來的第二種影響：

如今看看個人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>

來，先看看如今的效果：

你們注意，如今我是沒有給外面的div高度的寬度的，我只是給了它的背景顏色是黃色，這種狀況很容易理解嘛，由於它的子元素把它撐開了嘛，那如今個人需求變了，我想讓div1和div2在同一行排列，那麼，如今我就給div1和div2添加一個向左浮動，來看看會有什麼效果:

注意了，如今div1和div2都有了向左浮動，脫離了標準流，咱們發現，本來外面包裹的div不見了，不理解的人這時候就很納悶了，可能你在用的時候不會注意到，也有可能當時需求不同，因此不能注意到這點，它是怎麼回事呢，由於div1和div2都脫離了標準流，因此外面包裹的div沒有支撐的東西，也就是所謂的高度塌陷，那麼，咱們並不想讓它呈現出這種效果，因此這個時候就要清楚浮動了，這裏我就說第二種清楚浮動的方法，overflow方法，在父元素上設置overflow這個屬性，若是父元素的這個屬性設置爲auto或者是hidden，父元素就會擴展包含浮動，這個方法有着比較好的語義性，由於它不須要額外的元素，可是，要記住一點，overflow屬性不是爲了清除浮動而定義的，要當心不要覆蓋住內容或者觸發了不須要的滾動條。

如今我就給外面的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>

看看效果吧：css

如今外面的div是否是又出來了。

不一樣的狀況就須要不一樣的浮動清除辦法，如今來講說第三種清除浮動的方法:

就是利用僞類元素來清除有浮動的標籤，也就定義一個公共的類clearfix，給這個類添加css屬性，在裏面進行清除浮動的操做，光說沒用，直接看代碼吧：

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

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

這裏把它寫成公共的樣式，只要哪裏須要清除浮動，就在哪裏添加一個清除浮動的類，好比上面的例子，我就給外面包着的div添加clearfix這個類，能夠達到和上面一樣的效果。這種方式這樣理解，就是利用僞類元素，也就是在有浮動的標籤前面添加一個塊級元素，來達到效果。

代碼以下：

<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中的浮動和清除浮動所帶來的影響，若有不足的地方，還請各位博友斧正！謝謝你們！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。