清除浮動

清除浮動以前

 1 .container {
 2   border: solid 1px red;
 3 }
 4 .content {
 5   border: solid 1px green;
 6   width: 20px;
 7   height: 200px;
 8   float: left;
 9 }
10 
11 <div class="container">
12   <div class="content">
13   </div>
14  </div>

使用帶有clear屬性的空元素

在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性便可清理浮動。

缺點：添加大量無語義的html

demo:

.clear {
  clear: both;
}

<div class="container">
  <div class="content">
  </div>
  <br class="clear"> // 無語義標籤
</div>

使用CSS的:after僞元素

爲父元素添加僞元素

.container:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}

 

建立BFC

爲父元素建立BFC

如何觸發BFC?

• 浮動元素，float 除 none 之外的值
• 絕對定位元素，position（absolute，fixed）
• 非塊級盒子的塊級容器，例如：inline-blocks, table-cells, and table-captions。
• overflow 值不爲 visible 的塊級盒子。