Question

我有一个双栏布局，左边是侧边栏，右边是内容。

所以我将侧边栏向左移动，并将右边的内容放在边缘。一切都很好，很好......

直到内容的子元素应用了明文，它才会跳到侧边栏下方。

有没有办法让子元素只在其父容器中浮动和清除？

一张图片值1000字，这里是一个JSFiddle：

http://jsfiddle.net/qRYYm/1/

Answer 1

如果您向overflow:auto;添加.content，那就应该看对了。

Answer 2

这个怎么样：

aside{
    position: absolute;
    height: 300px;
    width: 100px;
}

http://jsfiddle.net/qRYYm/2/

Answer 3

你应该避免使用clear。您可以使用overflow：hidden with main container

<div class="content">
    <div class="one">One</div>
    <div class="two">Two</div>    
</div>

.content { float: left; overflow: hidden; width: 900px; }
aside { float: left; width: 100px; }

此外，您不应使用margin-left：100px将内容从左侧列推出。向左漂浮。我发现列喜欢在主包装中。这样比较舒适。

Answer 4

你也可以这样做。

.left{float:left;}
.right {float:right;}
.clear{clear:both;}

<div>
    <div class="left">SideBar</div>
    <div class="right">
             <div>
                 <div class="left">content 1</div>
                 <div class="left">content 2</div>
                 <div class="clear"></div>
             </div>
   </div>
    <div class="clear"></div>
</div>

在任何div上应用float时，将它们放在父div中并在同一父div中清除

CSS子清除父浮动

4 个答案: