float（浮動）的屬性和使用方法

 1float浮動的屬性值

• 　　left:向左浮動
• 　　right:向右浮動

 2、當父元素未浮動，子元素浮動時，就會造成浮動塌陷

實例：

父元素：

#mainDiv{
border: 5px solid red;
width: 1349px;
height: 800px;

}

 

子元素：

div {
width: 300px;
height: 400px;
float: left;
}

 

 3、浮動的影響

• 在允許的空間並排顯示，如果空間不夠，會自動換行
• 改變塊級元素占據一整行的特性，去掉多余的空間，把寬度縮成本身的內容的寬度或者設置的寬度
• 浮動會脫離正常的文檔流
• 輔導會造成塌陷
• 內嵌元素浮動后將可以設置寬高

 

 4、解決清除浮動me總結

• 在不浮動的前一個標簽屬性中設置清除浮動,但是只針對同一父級元素中的內容
• 借用一個塊級元素單獨設置clear：both
• 在父元素中設置整體要浮動的高度和。
• 讓父元素與子元素一起浮動（不推薦）
• 為父元素設置overflow：hidden
• 為塌陷的父元素添加一個after屬性，設置如下：

實例：

 div：after{
clear：both;
content：""; ////是沒有內容的，content里面是可以設置內容，實際是不存的
height:0;
width:0;
wisibility:hidden;
}