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

This topic created in 5346 days ago, the information mentioned may be changed or developed.

想做个两列布局，左侧用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 replies • 1970-01-01 08:00:00 +08:00

mywaiting

Oct 18, 2011

弄个clearfix进去....

darasion

Oct 18, 2011

@mywaiting 具体因该怎样做呢？

kasuganosora

Oct 18, 2011

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

supersheep

Oct 18, 2011

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

heckthisplace

Oct 18, 2011

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

spritevan

Oct 18, 2011

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

darasion

Oct 18, 2011

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

Sivan

Oct 18, 2011

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

darasion

Oct 19, 2011

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

keakon

Oct 19, 2011

@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

Oct 19, 2011

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