清除浮动的6种方法

| |

看到一些清除浮动的方法，自己试了一遍之后的总结。

HTML：

1
2
3
4
5
6
7
<div class="div1">
    <div style="float:left">Left</div>
    <div style='float:right'>Right</div>
</div>
<div class="div2">
    div2
</div>
  • 父级div1定义伪类:after。有点麻烦，代码多，很多网站使用，跟<div style="clear:both"></div>很相似;
1
2
3
4
5
6
7
8
.div1:after{
    content:"";
    display:block;
    clear:both;
    /*更严谨的加上下面两行*/
    visibility:hidden;
    height:0;
}
  • 结尾处加空div标签clear:both，或者br标签。
1
2
3
4
5
6
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div style="clear:both"></div>
    <!--或者：<br>-->
</div>

  • 父级div也浮动，需要定义宽度。都浮动的话容易出现新问题，不推荐使用。

  • 父级div定义 display:table，不推荐。

  • 父级div定义 overflow：auto/hidden

1
2
3
.div1 {
    overflow:auto/hidden;
}
  • 父级div定义 height。