float 屬性絕對是眾多切圖仔用的最多的 CSS 屬性之一，它的用法很簡單，常用值就 left、right、none 三個，但是它的特性你真的弄懂了嗎？
我會在這里介紹我對 float 的認識與使用，以及使用過程中遇到的問題。
對 float 的認識
1. float 元素具有 BFC 模型特性
當給元素添加 float 屬性后，元素便會具有 BFC 模型的效果。比如給內聯元素 span 等添加 float 屬性后，內聯元素也可以設置寬高和 margin。
2. float 與 position
當給元素添加了絕對定位 absolute 或者 fixed 后，元素的浮動效果就會消失，即便 float 屬性設置在 position 屬性之后。
3. 脫離標準文檔流
浮動元素會脫離標準文檔流，會給它后面的兄弟元素造成影響，如果要清楚對兄弟元素的影響，只需要給緊鄰的兄弟元素添加 clear: both 就好，但是緊鄰的兄弟元素的 margin 依然是相對于父元素的。
4. 破壞父元素高度
當父元素沒有設置高度，也不是 BFC 模型時，如果給子元素添加浮動效果，那么便會造成父元素高度的坍塌。
要清除浮動給父元素帶來的破壞效果，方案也有很多，最直接的是把父元素變成 BFC 模型的元素就行。
不過大家使用最多的方式應該是添加一個 .clearfix 的類，不過對于這個類的寫法有很多種，而我一般使用的是張鑫旭老師的方法，代碼量最少：
.clearfix {zoom: 1; } .clearfix::after { content: ''; display: table; clear: both; }5. float 與 padding
浮動元素不會超過父元素的內邊距 padding。
利用第五點與第三點，我們在方便的實現一些布局效果并減少層級嵌套。
比如我們通常會遇到如下的樣式布局：
代碼實現：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>浮動</title> </head> <body> <div class="container"> <p class="tt">1\. 這是標題</p> <button class="btn">刪除</button> <div class="con"> 這里是具體的內容 </div> </div> </body> </html>.container {width: 400px; padding: 20px; border: 1px solid #ccc; } .tt { float: left; margin: 0; width: 200px; overflow: hidden; } .btn { float: right; } .con { padding-top: 10px; clear: both; }標題欄既有文本也有刪除等按鈕，我們直接使用 float，而下面的內容部分我們通過 clear: both; 來讓顯示位置正確。標題欄部分和內容部分的間距則通過給 .con 元素添加 padding 而不是 margin 來控制，因為它的 margin 是相對于父容器的。
6. float 與 margin
兩個相鄰的浮動元素，當第一個浮動元素的寬度為100%時，第二個浮動元素會被擠到下面，通過添加負的 margin-left 或者 margin-right 值（絕對值最少等于它自身的寬度），可以使它回到第一行。
常見布局
利用這一點，我們也可以實現很多布局，比如：
在書寫html代碼時，我們通常的習慣根據UI樣式，從左往右來寫代碼，但有時候右側的內容比較重要，所以它的html結構需要放在左側內容上面，讓它更早的加載。
<div class="comment"> <!-- 右側重要內容 --> <div class="content"> <div class="author"> <span class="name">哇哈哈</span> <span class="date">2016-78-55</span> </div> <p class="text">吃的再多也不長胖，好愁人啊，怎么能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎么能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎么能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎么能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎么能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎么能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎么能快速長胖呢，在線等，急！</p> <div class="meta"> <span class="msg-tag">贊</span> <span class="msg-tag">回復</span> </div> </div> <!-- 左側內容 --> <a href="#" class="avatar"><img src="images/header.jpg" alt="頭像"></a> </div>* {margin:0; padding:0;} li {list-style: none;} a {text-decoration: none;} body {font-family: '微軟雅黑';} .wrap { width: 800px; margin: 50px auto; } .content { float: right; margin-left: 100px; } .date { font-size: 14px; color: #666; } .text { margin: 20px 0; } .avatar { float: left; margin-right: -80px; } .avatar img { width: 80px; height: 80px; border-radius: 50%; }如上面圖的效果，盡管在UI上，.content 元素在 .avatar 右邊，但我們在 html 結構中，仍然需要把 .content 元素放到 .avatar 元素前面，這個時候就可以通過給 .content 元素設置為右浮動，然后給 .avatar 元素設置左浮動，再添加負 margin-right 值，讓它回到上面。
2. 右側定寬流式布局
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div class="content"> <div class="box1"> <div class="inner"></div> </div> <div class="box2"></div> </div> </body> </html>.content {width: 500px; overflow: hidden; } .box1 { box-sizing: border-box; float: left; width: 100%; height: 50px; padding-right: 220px; border: 1px solid #ccc; } .inner { width: 100%; height: 40px; border: 1px solid #f23; } .box2 { float: right; width: 200px; height: 30px; margin-left: -100%; border: 1px solid #2fe; }
)
