1011 A+B 和 C
阿新 • • 發佈：2020-10-26
什麼是浮動
- 在普通流中，元素是按照它在 HTML 中的出現的先後順序自上而下依次排列布局的，
- 在排列過程中所有的行內元素水平排列，直到當行被佔滿然後換行，塊級元素則會被渲染為一整行。
- 如果沒有特殊樣式指定，所有元素預設都是按照普通流方式排列布局，即普通流中元素的位置由該元素在 HTML 文件中的位置決定的。
- 浮動使元素脫離文件普通流，漂浮在普通流之上的。
- 浮動元素依然按照其在普通流的位置上出現，然後儘可能的根據設定的浮動方向向左或者向右浮動，直到浮動元素的外邊緣遇到包含框或者另一個浮動元素為止，且允許文字和內聯元素環繞它。
- 浮動會產生塊級框（相當於設定了display:block），而不管該元素本身是什麼。
浮動導致的問題:
浮動導致元素已不在普通流中，所以在排列布局的時候文件中的普通流表現的和浮動元素不存在一樣，當浮動元素的高度超出包含框的時候，會出現包含框不會自動撐高來包裹浮動元素，即所謂的“高度塌陷”。如下圖所示
<style> #wrapper { outline: 2px solid red; } .float1 { float: left; background-color: blueviolet; } </style> </head> <body> <div id="wrapper" class="clearfix"> <div class="float1"> 浮動元素</div> </div> </body>
怎麼清除浮動
-
給父容器新增after偽類和zoom樣式（推薦使用）可以寫成公共樣式，zoom相容IE
- 推薦使用
/* 給父元素設定after元素和zoom樣式 ,zoom相容IE*/ .clearfix::after { content:""; display: block; clear: both; visibility: hidden; height: 0; } .clearfix { zoom: 1; }
2.給父元素設定overflow:hidden或者overflow:auto
- 不推薦該用法，使用hidden時當內容較多時會被遮擋，使用auto時內容較多會出現滾動條。
- 通過觸發BFC方式，實現清除浮動
/* 2. 給父元素設定overflow:hidden或者 overflow:auto (不推薦該用法，使用hidden時當內容較多時會被遮擋，使用auto時內容較多會出現滾動條) */ .clearfix { /* overflow: hidden; */ overflow: auto; }
3.額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設定clear：both；）
- 不推薦使用，可能會增加很多空標籤，程式碼冗餘
- 注意點: 在最後一個浮動便籤後面
/* 新增空標籤，並設定clear:both的樣式 */ .clearfix { clear: both; }
<div id="wrapper" class="clearfix"> <div class="float1"> 浮動元素 </div> <div class="clearfix"></div> </div>
4.給父容器設定高度 （不推薦，當浮動元素和設定的容器高度不一樣時會出現問題，適合固定高度佈局時使用）
5.讓父元素一起浮動（不推薦，可能會影響父元素的兄弟元素和其父元素的排列布局）
6.給父元素設定display:table或者display:inline-block, 觸發BFC清除浮動
- 不推薦使用
/* 4. 給父元素設定display:table 或者 display:inline-block, 觸發BFC */
.clearfix {
/* display: table; */
display: inline-block;
}
7.使用before和after雙偽元素清除浮動
/* 5. 使用before和after雙偽元素清除浮動 */ .clearfix:after,.clearfix:after { content: ""; display: block; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
參考:
https://blog.csdn.net/u013356907/article/details/82778480