清除浮动

清除浮动以前

 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 的块级盒子。