CSS浮動屬性

clear-both; overflow clearfix

浮動屬性

浮動可以讓元素一個挨着一個。創建一個自然流布局，同時可以設置自身尺寸和父元素容器的尺寸大小。一個元素浮動時，其他元素會“環繞”他。
當元素浮動時，一個元素的位置取決於放置在他周圍的元素，圍繞在他周圍的第是哪個元素？這個元素會不會換行，這一切取決於圍繞在他周圍的元素的DOM（文檔對象模型，圖1）

 

advanced

 

浮動存在的問題
典型問題是一個父元素包含多個浮動子元素，頁面內容設置一個寬度
，子元素的浮動確定了他們的位置，但浮動的元素不改變父元素的寬度。這樣會使父元素塌陷，從而使父元素的高度為“0”，從而忽略其他屬性，這種現象多數時候被忽略，特別雜父元素沒有樣式一起其子元素看起來都很正確的時候。

嵌套的元素不會正確的排列，可能會出現錯誤，看下例。在box-set的div應該有個灰色背景，因為子元素浮動后，灰色的背景看不到。仔細檢查后，box-set的高度變成了“0”’。

<div class="box-set">
        <div class="box">Box1</div>
        <div class="box">Box2</div>
        <div class="box">Box3</div>
    </div>

.box-set{
    background-color: #ccc;
}

.box{
    background:lightgreen;
    height:100px;
    line-height: 100px;
    float: left;
    margin:10px;
    width: 100px;
    text-align: center;
    color:#fff;
    border-radius: 10px;
}

結果如下圖img

 

img

解決方法：
1. 清理浮動（clear:both;）
在容器結束標簽前加一個空標簽，設置空標簽的樣式“clear:both;”。此情況大多數情況下有效，但如果一個頁面需要很多的清理浮動就造成了空標簽的堆積。

 

 <div class="box-set">
        <div class="box">Box1</div>
        <div class="box">Box2</div>
        <div class="box">Box3</div>
        <div class="clear"></div>
    </div>

.clear{
    clear: both;
}

結果如下圖img2：

 

img2

 

2.overflow技巧
overflow屬性規定當內容溢出元素框時發生的事情。
在具有浮動元素的父容器中設置“overflow”的屬性值為“auto”或“hidden”，父容器會存在一個高度，背景色也就顯示。

• 存在的缺點
  當添加樣式或者給元素添加一個陰影或制作一個下拉菜單時，就會出現一些問題，比如給div添加一個陰影，可以看到陰影被父元素切斷，無法伸出父元素外。
  結果如下圖img4：

   

  
  

  img4
  
  3.clearfix技巧
  清理浮動更好的方法是clearfix技巧。clearfix是基於父元素上使用“:before”和":after"兩個偽類。使用偽類在浮動元素的父容器前面和后面創建隱藏元素。“：before”偽類用於防止子元素頂部的外邊距塌陷，使用“display：table”創建一個匿名的table-cell元素。“：after”偽類用於防止子元素底部的外邊距塌陷，以此來清理元素的浮動。
  我們給需要的元素添加group的類名，這樣就不會使代碼堆疊嚴重。

   

<div id="box-set" class="group">
        <div class="box">Box1</div>
        <div class="box">Box2</div>
        <div class="box">Box3</div>
    </div>

.group:before,.group:after{
    content: "";
    display: table;
}

.group:after{
    clear:both ;
}

#box-set{
    background-color: #eee;
}

效果如下圖img5：

 

img5

其中的子元素可伸出父元素外，並且清理了浮動。