这些天开发过程中遇到了层内元素浮动的问题,并且看到了一种新的解决方法,拿出来分享下。

在用div+css布局的过程中,我们设定一个div容器里有浮动元素,而如果这个div容器本身为空或是高度比浮动元素小的话,浮动元素就会溢出它包含的div容器。举个例子:

#main{border:1px #FF0000 solid;}
.f1{border:1px #000000 solid; margin:2px;}

 

第一个浮动层

 

第二个浮动层

上述代码会显示如下效果:

1.gif

当我们设置了f1类的属性为向左浮动(float:left;)的时候,刚才说的溢出的情况就出现了。如下图:

2.gif

这个问题也是我面试阿里巴巴的时候杨MM问我的一个问题。当时给出的答案是讲#main也设置为浮动,这个ok没有问题了。不过这种做法细节上是解决了,但是肯定在全局布局的时候可能会影响其他的元素,并不是一个理想的方法。目前我们的做法是在容器内新增一个元素,然后利用clear:both;来清楚浮动。详细代码:

#main{border:1px #FF0000 solid;}
.f1{float:left; border:1px #000000 solid; margin:2px;}
.clr{clear:both;}

 

第一个浮动层

 

第二个浮动层

 

这是这种方法下的显示效果: 

3.gif

不过前不久看到了一个新的方法。(CssCreator.com的Tony Aslett 创建)。给母容器增加新的css

#main{border:1px #FF0000 solid;}
.f1{float:left; border:1px #000000 solid; margin:2px;}
.clear:after{
 content:”.”;
 display:block;
 height:0;
 font-size:0;
 clear:both;
 visibility:hidden;
}
.clear{ min-height:1px;}
*html .clear{ height:1px;}

 

第一个浮动层

 

第二个浮动层

其实思路是和刚才的方法一样的,只是实现上利用:after伪类添加一个clear:both的属性来清楚浮动而不是新增额外的html代码。当然ie6不支持伪类,于是还要专门为他们写上height。这样,一个没有新增html的方案就出来了。效果如下:

4.gif

Category: 前端

one responses

Leave a Reply

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

  1. 帅 赵 says:

    这个不是最简单的清除子元素浮动?