清除浮动的方法

#清除浮动的本质:

解决父级元素没设置高度,而子元素浮动了引起的内部高度为0的问题

 

三种布局方式: 标准流布局 定位布局 浮动布局

 

标准流:父盒子没有设置高度,子盒子会把父盒子撑开

浮动:父盒子没有设置高度,子盒子不会撑开父盒子

1.额外标签法

本质:哪个盒子清除浮动,就给哪个盒子的后面添加一个空标签,然后给这个空标签添加一个类

.clear{
    clear:both;
}
​
<div></div>
<div class="clear"></div>
优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。
​
给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

 

2.父级添加overflow:hidden

可以通过触发BFC的方式，实现清楚浮动效果。优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

注意：别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

 

 

3.使用after伪元素

优点：符合闭合浮动思想，结构语义化正确缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

 

.clearfix:after {
    content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix {
    *zoom:1;
}
​
给父亲添加

4.使用双伪元素

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}
​
给父亲添加 clearfix