网站首页 » 前端开发 » div+css » CSS:清除浮动的方法(技巧)有哪些?
上一篇:
下一篇:

CSS:清除浮动的方法(技巧)有哪些?

前言

浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。

清除浮动方法

float 法

也就是给父元素一个浮动,以达到清除浮动的效果。

/* 样式 */
.wrap-clear{border:1px solid #ccc;float: left;}
.left-column{float: left;border:1px solid teal;}
<div class="wrap-clear">
 <div class="left-column">left-column-1</div>
 <div class="left-column">left-column-2</div>
</div>

这时有一个小问题,加了float:left后,元素的会包裹里面的元素及内容,而不会像块元素那样100%宽,所以如果你占满一行,那么你可以给元素加上width:100%。

overflow:hidden 法

这种方法相信你已经不陌生了,但我还是把这几行可怜的代码贴出来

/* 样式 */
.wrap-clear{overflow: hidden;border:1px solid #ccc;}
.left-column{float: left;border:1px solid teal;}

<!-- HTML代码 -->
<div class="wrap-clear">
 <div class="left-column">left-column-1</div>
 <div class="left-column">left-column-2</div>
</div>

上面的代码就不作过多的解释了。

overflow:auto 法

overflow:auto 法跟overflow:hidden 法写法差不多,改下属性值,然后再追加一个属性就可以了代码如下。

/* 样式 */
.wrap-clear{overflow: auto;zoom:1; border:1px solid #ccc;}
.left-column{float: left;border:1px solid teal;}

<!-- HTML代码 -->
<div class="wrap-clear">
 <div class="left-column">left-column-1</div>
 <div class="left-column">left-column-2</div>
</div>

样式代码里的 zoom:1 是为了兼容IE的。

:after 伪类法

/* 样式 */
.wrap-clear{border:1px solid #ccc;zoom:1}
.wrap-clear:after{content: '\0020';height: 0;line-height: 0;visibility:hidden; clear: both;display: block}
.left-column{float: left;border:1px solid teal;}

<!-- HTML代码 -->
<div class="wrap-clear">
 <div class="left-column">left-column-1</div>
 <div class="left-column">left-column-2</div>
</div>

上面代码中的zoom:1是为了兼容IE7及以下不支持伪类的版本,网上有很多地方说是IE6,但我测试时发现,IE7,IE6,IE5都不支持伪类,所以给.wrap-clear 类添加zoom:1属性来实现清除浮动的效果。这个是IE特有的属性。

 空标签法

其实这个方法跟上面的伪类方法原理是一样的,只是我们是在HTML结构代码里手动地加了一个空标签

/* 样式 */
.wrap{border:1px solid #ccc;}
.clear{content: '.';height: 0;line-height: 0;visibility:hidden; clear: both;display: block}
.left-column{float: left;border:1px solid teal;}

<!-- HTML代码 -->
<div class="wrap">
 <div class="left-column">left-column-1</div>
 <div class="left-column">left-column-2</div>
 <div class="clear"></div>
</div>

display:inline-block 法

这种方法可能你见得比较少,但display:inline-block确确实实帮你解决了这个清除浮动的问题。

/* 样式 */
.wrap-clear{border:1px solid #ccc;display: inline-block;width: 100%}
.left-column{float: left;border:1px solid teal;}

<!-- HTML代码 -->
<div class="wrap-clear">
 <div class="left-column">left-column-1</div>
 <div class="left-column">left-column-2</div>
</div>

如果.wrap-clear类里没有添加width:100%;那么 添加了.wrap-clear类的这个 div 是紧紧的包裹着子元素的,而不是像块级元素那么完为100%,所以这里你可以根据自己的实践需求进行设置。

原理

1.overflow:hidden 触发了BFC。

2.display:inline-block 触发了BFC。

3.clear:both 清除浮动。

4.使用 zoom:1触发 hasLayout。

只要能触发BFC的属性都可以实现清除浮动的效果,触发BFC的属性有很多如:absolute、table-cell(IE8+)也是可以的,只不过使用了absolute 属性可能就会得不尝失了,因为容器脱离文档流了。

总结

上面说得也够乱的,下面我们就来整理下解决清除浮动的方法大致可以归纳为以下两种:

tip

1.clear:both

2.触发BFC 配合 hasLayout

触发BFC

float: left|right
overflow: hidden|auto|scroll
display: table-cell|table-caption|inline-block
position: absolute|fixed

以上任意一个都可以实现清除浮动。

触发hasLayout(兼容低版本的IE)

position: absolute 
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl

下面这个是清除浮动的最终代码,你可以直接拿过去用,但也要看情况,因为如果你要清除浮动的元素已经恰好用上了触发BFC的属性,那么这个就不用引入了。

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

上面的*zoom:1中的“*”可加可不加,因为这个只有IE认得,其它浏览器是不认的。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/css-clear-floating-boxes/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END