Я использую twitter bootstrap 3, чтобы создать макет, который имеет два столбца, боковую панель с плавающей точкой и основное содержимое с левым полем относительно размера боковой панели, но когда я использую класс clearfix в уль элемента внутри основного контента, кажется, что clearfix класс, очистить боковую панель (плавать ясно) и нажмите мкл и последующее содержание вниз.twitter bootstrap clearfix push down
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;
}
Как я могу исправить это поведение?
Этого работает, но я не могу понять, почему, так что вы можете объяснить это поведение ?. Примечание. Я видел, что .row {overflow: auto; } работает тоже. – dhamaso
@dhamaso ответ обновлен. –