如何清除浮动

1、首先来康康什么是浮动？浮动有什么特点？

浮动的元素会可以向左或向右移动，直到元素的框外边缘碰到另一个框的外边缘为止。

浮动元素的特点：

1. 脱离文档流，将不再占据空间
2. 可能会覆盖住别的元素。如果覆盖了别的元素，别的元素中的文字将会围绕浮动元素排开
3. 收缩宽度。块级元素设置浮动后，将不再占满一行，而是收缩为内部元素的宽度

浮动元素的缺点：

• 父容器的高度会塌陷

2、浮动的属性

• clear : left / right / both / none / inherit ;
• float : left / right / none / inherit ;

利用浮动的这些属性及属性值，可以妙用于布局。

3、如何清除浮动

• 在最后添加一个块级元素作为冗余元素，并将其设置：clear:both;
• 在最后添加一个<br/>，并将其设置：clear:all;
• 使用伪元素

  /*开启haslayout*/
  .clearfix {
      zoom: 1;
  }
  
  .clearfix:after {
      content: '';
      display: block;
      clear: both;
      height:0;
      line-height:0;
      visibility:hidden;
  }

• 给浮动的父元素增加高度
• 给浮动的父元素设置：overflow:hidden（这将使父元素形成BFC，下篇详解BFC）