css浮動Float

核心：浮動元素會脫離文檔流並向左/向右移動，直到碰到父元素或者另一個浮動元素。

 

float ：left　向左浮動

　　　right　向右浮動

　　　none （默認）

　　    inherit  繼承父元素

 

float效果

原效果圖

 

換張圖.....由於我忽然發現一個問題，用這張圖很差解釋........

原圖

代碼

        #container{
            width: 1000px;
            background-color:      #48D1CC;
            margin: 0 auto;
            padding: 40px;
        }
        .box1{
            width: 250px;
            height: 200px;
            margin: 20px 20px;
            background-color: greenyellow;
        }
        .box2{
            width: 400px;
            height: 300px;
            margin: 20px 20px;
            background-color: yellow;
        }
        .box3{
            width: 500px;
            height: 400px;
            margin: 20px 20px;
            background-color: lightblue;
        }
        span{
            font-size: 25px;
        }



        <div id="container">
            <div class="box1"><span>1111111111</span></div>
            <div class="box2"><span>222222222222</span></div>
            <div class="box3"><span>33333333333333</span></div>
        </div>            

 

 

 

 

而後讓div1右移動，效果以下圖

當div  float設置爲right時，div1會脫離標準文檔流，div2和div3會從新組成新的文檔流，而div1會向右浮動直到碰到父元素

當設置div2 float爲right時，div2到第二行的最後邊去了，這是爲何，爲何不在第一排呢？這是由於第一排是block，單獨佔據一行，而且還在標準流中，因此div2法佔用其位置

當div2 float爲left時，效果以下，div2浮動到div3上去了，這邊有一個問題，div3中的span被擠到下面去了，這是爲何呢，由於使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。而對於使用absolute positioning脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。

這邊有個問題，爲何div2會在div2下面一點呢，不是應該在同一行嗎？

 

當float都設置成left時，因爲div 1 2 3都脫離了標準流，會致使父元素高度坍塌

 

使用clear清除浮動

因爲浮動帶來的不肯定性.....常常會形成佈局的紊亂，清除浮動就很是有必要了

 

clear屬性不容許被清除浮動的元素左邊或者右邊挨着浮動元素，底層原理是在被清除浮動的元素上邊或者下邊添加足夠的清除空間

好比剛剛上面的圖，我要給父元素清除浮動，就只要

1 <div id="container">
2     <div class="box1"><span>1111111111</span></div>
3     <div class="box2"><span>222222222222</span></div>
4     <div class="box3"><span>33333333333333</span></div>
5     <div style="clear: both"></div>
6 </div>

 

而後上面就變成這樣了

注意，不要給浮動元素上添加浮動，就算給元素清除了浮動，但它仍是脫離標準文檔流的，因此父元素仍是坍塌的

 

如今咱們通常清除浮動的方法是使用clearfix 類，兼容性還比較好

全瀏覽器通用的clearfix方案

引用zoom支持IE6/IE7

加入：before解決現代瀏覽器的邊距摺疊問題

 1  .clearfix:before,.clearfix:after{
 2      display: table;
 3      content: "";
 4  }
 5  .clearfix:after{
 6      clear: both;
 7  }
 8  .clearfix{
 9      *zoom:1;
10  }
　　

 

1 <div id="container" class="clearfix">
2     <div class="box1"><span>1111111111</span></div>
3     <div class="box2"><span>222222222222</span></div>
4     <div class="box3"><span>33333333333333</span></div>
5 </div>

 

使用overflow:hidden;清除浮動

還有一種是BFC清除浮動

使用overflow:hidden;

1 #container{
2       width: 1320px;
3       background-color:      #48D1CC;
4       margin: 0 auto;
5       padding: 40px;
6       overflow: hidden;
7 }