float 常見用法與問題--摘抄

時間 2019-11-13

標籤 float 常見用法問題摘抄欄目 CSS 简体版

原文原文鏈接

float 屬性絕對是衆多切圖仔用的最多的 CSS 屬性之一，它的用法很簡單，經常使用值就 left、right、none 三個，可是它的特性你真的弄懂了嗎？html

我會在這裏介紹我對 float 的認識與使用，以及使用過程當中遇到的問題。git

對 float 的認識

1. float 元素具備 BFC 模型特性

當給元素添加 float 屬性後，元素便會具備 BFC 模型的效果。好比給內聯元素 span 等添加 float 屬性後，內聯元素也能夠設置寬高和 margin。github

2. float 與 position

當給元素添加了絕對定位 absolute 或者 fixed 後，元素的浮動效果就會消失，即使 float 屬性設置在 position 屬性以後。佈局

3. 脫離標準文檔流

浮動元素會脫離標準文檔流，會給它後面的兄弟元素形成影響，若是要清楚對兄弟元素的影響，只須要給緊鄰的兄弟元素添加 clear: both 就好，可是緊鄰的兄弟元素的 margin 依然是相對於父元素的。spa

4. 破壞父元素高度

當父元素沒有設置高度，也不是 BFC 模型時，若是給子元素添加浮動效果，那麼便會形成父元素高度的坍塌。3d

要清除浮動給父元素帶來的破壞效果，方案也有不少，最直接的是把父元素變成 BFC 模型的元素就行。code

不過你們使用最多的方式應該是添加一個 .clearfix 的類，不過對於這個類的寫法有不少種，而我通常使用的是張鑫旭老師的方法，代碼量最少：htm

.clearfix { zoom: 1; } .clearfix::after { content: ''; display: table; clear: both; }

5. float 與 padding

浮動元素不會超過父元素的內邊距 padding。blog

利用第五點與第三點，咱們在方便的實現一些佈局效果並減小層級嵌套。文檔

好比咱們一般會遇到以下的樣式佈局：

代碼實現：

<!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; }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。