浮動介紹
浮動（float）最初是為了讓文字環繞圖片排布，就想報紙上面的圖文混排模式。但 Web 開發人員很快意識到，任何東西都可以浮動，而不僅僅是圖像，所以浮動的使用范圍擴大了。浮動曾被用來實現整個網站頁面的布局，它使信息列得以橫向排列（默認的設定則是按照這些列在源代碼中出現的順序縱向排列）。目前出現了更新更好的頁面布局技術，所以使用浮動來進行頁面布局應被看作傳統的布局方法。
float屬性
在css中可以通過float屬性實現元素浮動，float屬性定義元素在哪個方向浮動，它有兩個值float:left 和 float:right，默認值為none
- 設置這兩個值元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。
- 浮動使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰浮動元素會停下來（padding也算）
- 浮動元素之后的元素將圍繞它，之前的元素將不會受到影響
特點
-
-
支持寬高、margin、padding，但不支持margin：auto
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .container{ width: 300px; height: 300px; background-color: #23A6D5; } img{ width: 100px; /* 設置圖片左浮動 */ float: left; } </style> </head> <body> <div class="container"> <img src="./image/start.jpg"> <p>文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素</p> </div> </body> </html>
運行效果：
浮動帶來的影響
通過上述簡單案例並不能直觀的發現浮動帶來的影響，這里我們只需要將以上demo的容器大小去掉，讓內容撐開盒子就可發現問題所在！
.container{ /* width: 300px; height: 300px; */ background-color: #23A6D5; }
得到效果如上所示，可以看出父元素高度塌陷，圖片已經不在容器內了。這樣的效果在網頁開發中會嚴重影響網頁布局
另外，如果父元素寬度不夠，子元素浮動導致浮動元素掉落，元素會卡主
清除浮動方法有哪些？
清除浮動需要使用
clear屬性，它有三個值：left、right、both，left值定出左浮動，right值清除右浮動，both值清除所有浮動
這里另外用一個demo演示幾種清除浮動的方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .container{ padding: 5px; background-color: #23A6D5; } p{ width: 50px; height: 50px; background-color: red; margin: 5px; } </style> </head> <body> <div class="container"> <p>1</p> <p>2</p> <p>3</p> </div> </body> </html>
給p元素設置浮動效果后：
p{ width: 50px; height: 50px; background-color: red; margin: 5px; float: left; }
解決以上浮動帶來的問題有以下幾種方法：
1）父級div定義height
.container{ width: 200px; height: 100px; padding: 5px; background-color: #23A6D5; }
2）最后一個浮動元素后加空div標簽並添加樣式 clear:both
<div class="container"> <p>1</p> <p>2</p> <p>3</p> <div style="clear: both;"></div> </div>
3）包含浮動元素的父標簽添加樣式 overflow 為 hidden 或 auto
.container{ padding: 5px; background-color: #23A6D5; overflow: hidden; }
4）父級 div 定義 zoom:1(IE)
.container{ padding: 5px; background-color: #23A6D5; overflow: hidden; }
5）用 after偽元素清除浮動（推薦）
.clearfix::after { content: ""; display: block; height: 0; clear: both; } .clearfix { zoom: 1; }
clearfix是父容器的class名稱content:""是在父容器的結尾處放一個空白符height: 0是讓這個這個空白字符不顯示出來display: blockclear: both是確保這個空白字符是非浮動的獨立區塊- 使用
zoom:1支持IE6
清除浮動的優缺點？
- 父級固定height： 只適合高度固定的布局
- 結尾空div法：如果頁面浮動布局多，會增加很多空div
- 父級BFC格局法：使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。不能和position配合使用，因為超出的尺寸的會被隱藏
- 父級div定義偽類：瀏覽器支持好，不容易出現怪問題（推薦）