CSS布局问题，如何绕过这个清理元素？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4784 天前的主题，其中的信息可能已经有所发展或是发生改变。

想做个两列布局，左侧用float，右侧用margin-left。
但是发现#bb总是会在#a的下边。怎么能绕过这个#bb呢？求解
html:
<div id="main">
<div id="a"></div>
<div id="b">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div id="bb"></div>
</div>
</div>

css：
#a{float:left;width:100px;height:200px;}
#b{margin-left:110px;}
.item{ float:left;}
#bb{clear:both;}

div

item

class

11 条回复 • 1970-01-01 08:00:00 +08:00

mywaiting

2011-10-18 20:57:57 +08:00

弄个clearfix进去....

darasion

2011-10-18 21:04:41 +08:00

@mywaiting 具体因该怎样做呢？

kasuganosora

2011-10-18 21:23:09 +08:00

#b{ width:100px; background:yellow;
float:left;
}
是这样的效果么

supersheep

2011-10-18 21:54:38 +08:00

我的做法一般是，上下结构就直接写static元素。
左右结构就让子元素float:left，父:元素写 :after{display:block;clear:both;content:'';}
基本能应对大多数情况

fim8

2011-10-18 22:29:15 +08:00

不明白楼主意思,绕过去是什么意思?

spritevan

2011-10-18 22:35:49 +08:00

#main { padding-left:100px; }
#a { float:left; margin-left:-100px; /*for ie6 double margin width*/_display:inline; }

darasion

2011-10-18 23:38:55 +08:00

@spritevan @supersheep 多谢，我试试看先。

Sivan

2011-10-18 23:52:50 +08:00

给#b加float就行了。可以清理内部浮动，又不会到#a下面

darasion

2011-10-19 00:11:02 +08:00

@Sivan #b 加 float 之后，宽度就不能自动伸展了。

keakon

2011-10-19 04:32:40 +08:00

@darasion 不知道我理解错没，你是要把#bb紧贴在#b下面吧。

先去掉#a的float，因为clear:left的元素左边不能出现浮动元素，这会导致#b只能在它下面。

接下来有2种选择：
1.把#b设为position: relative; top: -200px;
2.把#b设为position: absolute; top: 0; width: 100%;

或者把#a设为position: absolute，再给#b一个左边距就行了。
.item也可以用display: inline-block取代float:left，这样就不用clear了。
总之，布局时尽量避免float吧。

sigone

2011-10-19 09:39:12 +08:00

如果 #b 不需要背景填充的话
给 #bb 加 height:1px; overflow:hidden; 即可