twitter bootstrap clearfix 下推答案

【问题标题】：twitter bootstrap clearfix push downtwitter bootstrap clearfix 下推
【发布时间】：2013-12-16 06:54:24
【问题描述】：

我正在使用 twitter bootstrap 3 来设计一个布局，它有两列，一个浮动侧边栏和一个主内容，其左边距相对于侧边栏的大小，但是当我在 中使用 clearfix 类时主要内容里面的ul元素，好像是clearfix类，清理侧边栏（float clear）并推送ul em> 及后续内容。

见http://bootply.com/97603

HTML

<aside id="sidebar">
<h1>Search Items</h1>
<form id="searchForm">
    <div class="form-group">
        <label for="category">Category</label>
        <select name="category" id="category" class="form-control">
            <option value="">Choose</option>
            <option value="1">Category 1</option>
            <option value="2">Category 2</option>
            <option value="3">Category 3</option>
        </select>
    </div>
    <div class="form-group">
        <label for="term">Search Term</label>
        <input type="text" name="term" id="term" class="form-control"/>
    </div>
    <div class="text-center">
        <button class="btn btn-default">Search</button>
    </div>
</form>

CSS

body{
    background: #F7F5FA;
    overflow-x: hidden;
}
.container-full {
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;
}
#sidebar{
    float: left;
    width: 260px;
    position: relative;
    background: #ddd;
    display: block
}
#sidebar #searchForm{
    padding: 10px;
}
#main-content{
    margin: 0px 0px 0px 260px;
    background: #FFF;
    position: relative;
    min-height: 600px;
    width: auto;
}
.gallery ul{
    background: black;
}
.gallery li{
    float: left;
    width: 120px;
    height: 120px;
    padding: 5px;
    background: #ddd;
}
.gallery li a{
    display: block;
}

我该如何解决这个问题？

【问题讨论】：

标签： css twitter-bootstrap overflow push clearfix

【解决方案1】：

将此类添加到您的 CSS：

.row{
    overflow:hidden; 
}

DEMO

这是因为您的aside，您将固定宽度设置为aside，并将边距设置为您的main-content，这不是将元素并排放置的正确方法。但是如果你对你的aside 和main-content 使用百分比宽度并使用float 它会看起来不错，并且不需要overflow:hidden（或自动）。

看看这个：

DEMO

#sidebar{
    float: left;
    width: 20%;   /*  instead 260px */
    position: relative;
    background: #ddd;
    display: block
}

#main-content{
    background: #FFF;
    position: relative;
    min-height: 600px;
    width: 80%;   /*  instead auto   */
    float:left;   /*  added          */
}

【讨论】：

这行得通，但我不明白为什么，你能解释一下这种行为吗？注意：我已经看到 .row{ 溢出：自动； } 也可以。

【解决方案2】：

#main-content {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 0 0 260px;
min-height: 600px;
position: relative;
width: auto;

}

更改位置：相对于位置：绝对在上面的 id 你的问题将得到解决..

【讨论】：