Osheep

时光不回头,当下最重要。

清除浮动方法总结

浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 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

点赞