清除浮动的方法

[GGXXMM]

1、创建BFC

1.1 父容器设置overflow（hidden/auto）

1.2 父容器设置position（absolute/fixed）

1.3 父容器设置float

1.4 父容器设置display（inline-block）

2、浮动元素添加空元素，设置clear属性

HTML:

<div class="parent">
    <img src="http://damonare.cn/logo.png" class="fl"/>
    <p class="fr">浮动元素</p>
    <div class="clear"></div>
</div>

CSS：

.fl {
  float: left;
}
.fr {
  float: right;
}
.clear {
  clear: both;
}

3、使用:after伪元素（较为完美的方案）

.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.cleafix {
  /* 触发haslayout */
  *zoom: 1;
}