清除浮动的几种方式

清除浮动的四种方式：
标准流：在标准流里面，父盒子若是没有定义高度，高度就会依靠子元素撑开，若子元素设置了浮动，父元素的高度就会变成0，（浮动的元素脱离了文档流），影响了布局。
清除浮动的本质：解决父元素由于子级元素浮动引起的内部高度为0的问题。
清除浮动的方式：
1.给父元素写死高度，缺点就是高度写死了，不方面
2.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。注意空元素的放置位置，缺点就是页面中会多出无意义的div标签，比如：

 clear {
      clear: both;
      /* 清除浮动后，父级元素会自动检测孩子的高度，以最高的为准 */
    }
<div class="father">
    <div class="son">我是儿子元素</div>
    <div class="clear"></div>
  </div>
  .

3.为父级元素添加overflow方法：这种方式是通过触发BFC(块级格式化上下文)，实现清除浮动的效果
overflow:hidden或者overflow: auto;设置了overflow属性后，就会触发元素的BFC,BFC元素具有的特性：普通的块级元素不能够识别浮动子元素的高度，所以出现高度塌陷的问题，而BFC块级元素能够识别浮动元素，浮动元素会参与BFC元素高度的计算，从而解决高度塌陷的问题。
4.使用afte伪元素清除浮动：

 .clearfix:after {
      content: "";
      display: block;
      clear: both;
      visiblity: hidden;
      height: 0;
    }

    .clearfix {
      *zoom: 1;
      /* ie6支持伪元素，*zoom1是ie6清除浮动的方式 ,其他的浏览器不会识别这句话*/
    }

父元素添加上.clearfix类名.

 .clearfix:after,
    .clearfix:before {
      content: "";
      display: block;
      clear: both;
    } 

    .clearfix {
      *zoom: 1;
      /* ie6支持伪元素，*zoom1是ie6清除浮动的方式 */
    }

父元素上也是加上类名.clearfix