Feng’ Blog

清除浮动的几种方式
不清除浮动会怎样?背景不能显示边框不能撑开margin 设置值不能正确显示下方内容往上移盖住浮动区域的内容html...
扫描右侧二维码阅读全文
07
2017/12

清除浮动的几种方式

不清除浮动会怎样?

  1. 背景不能显示
  2. 边框不能撑开
  3. margin 设置值不能正确显示
  4. 下方内容往上移盖住浮动区域的内容

html代码:

<div class="container"> 
 <div class="fl"> </div> 
 <div class="fr"> </div>
</div>
<style>
    fl{float:left;}
    fr{float:right;}
</style>

方式一:

.container下,最后再加一个div如下:

<div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>

方式二:

给父元素.container添加样式:

.container{
    overflow: auto;
    zoom: 1;
}

方式三:

伪类清除浮动:after:

.container:after{
    content:'';
    display: block;
    clear: both;
    height:0;
    width:100%;
    visibility: hidden;
}.container{  zoom:1;//为了兼容IE}

方法四:

双伪类清除浮动:

.container:before,.container:after {
    content: "";
    display: block;
    clear: both;
}.container{
    zoom: 1;
}

方式五:

展现为表格,需设置宽度:

.container{
    width:100%;
    display:table;
}

方式六:

展现为内联块状,需设置宽度:

.container{
    width:100%;
    display:inline-block;
}

方式七:

超出隐藏,不推荐使用

.container{
    overflow:hidden;
}

方式八:

给父元素定义高度,不推荐使用

.container{
    height:50px;
}
Last modification:January 8th, 2019 at 09:36 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment