清除浮动方法总结

浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性,在网页设计中清除浮动是一种很常见的操作,以下整理了几种清除浮动的方法

  • 给父元素设定高度
  • 给下一个添加clear属性
  • 增加一道墙(空标签)
  • 使用after伪元素
  • 使用overflow:hidden属性

具体方法

HTML 默认统一代码:

<div id="div1">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div id="div2"></div>

1.给父元素设定高度

#div1{
    width: 400px;
    height: 120px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}
给父元素设定高度

分析:这种方法只适合高度固定的布局,需要给出精确的高度,不建议使用

2.给下一个添加clear属性

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
    clear: both;
}
给下一个添加clear属性

分析:父元素的高度没有被撑起来,设置的样式可能会失效,且margin属性不再起作用

3.增加一道墙

我们可以在两个父类之间增加一道墙使它们分开

<div id="div1">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="cl"></div>
<div id="div2"></div>

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

.cl{
    height: 0;
    line-height: 0;
    clear: both;
}
添加一道墙

分析: 该方法弥补了margin属性的问题,但父元素的高度仍然没有被撑起

在第一个父元素内部增加一道墙

<div id="div1">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="cl"></div>
</div>

<div id="div2"></div>

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

.cl{
    height: 0;
    line-height: 0;
    clear: both;
}
添加一道墙

分析: 该方法解决了以上的问题,但使用额外的标签会让人感觉很不爽,这是以前主要使用的一种解决方法

4.使用after伪元素

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

#div1:after{
    content: '';
    display: block;
    clear: both;
}
/*兼容IE*/
#div1{
    zoom: 1;  
}
使用after伪元素

分析: 推荐使用,可以定义公共类来减少css代码

5.利用overflow:hidden属性

#div1{
    width: 400px;
    /*height: 300px;*/
    border: 1px solid black;
    overflow: hidden;
    zoom: 1; /* 兼容IE */
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}
overflow属性

分析: overflow本意是将溢出盒子的内容隐藏掉,但是仍可以用来做浮动的清除。在不使用position属性的时候可以使用该方法。

另外还有使父元素浮动,父元素绝对定位,父元素定义display:table等方法,但都有相应的问题,了解一下即可。

文章同步: levinhax's Github Blog

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,071评论 0 2
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 854评论 0 6
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,212评论 0 1
  • 我们在日常开发布局中经常会使用到流体布局,流体布局用到的一个最重要的属性就是浮动,今天就来看看浮动的相关知识。 1...
    一木_qintb阅读 1,133评论 0 2