плавающий div не входит во внутренний div

Question

Всякий раз, когда div перемещается влево или вправо, он выходит из контейнера div. Div вписывается в контейнер div, если его свойство float удалено. Как это происходит? Пожалуйста, скажите мне. Пожалуйста, обратитесь к моему jsfiddle по адресу http://jsfiddle.net/ZtJZS/. Foollowing мой код: -

<div class="main"> 
<div class="left-content"> 
    This is an example content<br /> 
    This is an example content<br /> 
    This is an example content<br /> 

</div> 
</div> 

CSS код можно найти в моей скрипке ... Спасибо заранее.

Answer 1

То, как он работает с плавающими элементами - плавающее содержимое «не считается» для высоты родительского элемента. Чтобы обойти это, вы должны выбрать некоторые из вариантов:

• сделать .main DIV плавающих, а также, как это можно увидеть в this version of your fiddle. Это может, однако, не быть приемлемым для вашего макета.
• использовать overflow:auto, чтобы сделать внешний div span внутренним. Описанное здесь «новое решение» работает очень хорошо: http://www.quirksmode.org/css/clearing.html Вот как это looks in your fiddle.

Answer 2

Что вам нужно, это CSS clear fix. Он очистит высоту содержащего div.

Добавьте следующую таблицу стилей:

/** 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* contenteditable attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that are clearfixed. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
} 

И добавить cf класс в содержащий div.

И вот пример jsFiddle.

Answer 3

Вы можете добавить переполнение: скрыто; к вашему основному стилю. Это заставит ваш cointainer прокрасить. См http://jsfiddle.net/ZtJZS/4/

div.main{ 
    width:90%; 
    padding:15px; 
    border:1px solid #000; 
    overflow: hidden 
} 

Добавить высоту в стиле, если вы хотите, чтобы ограничить его вертикальной streach и добавить вертикальную полосу прокрутки, чтобы контейнер прокручивать

Answer 4

также вы можете поместить DIV в конце основной DIV и его сделают то, что вы хотите

<div class="main"> 
<div class="left-content"> 
    This is an example content<br /> 
    This is an example content<br /> 
    This is an example content<br /> 

</div> 
<div style="clear:both"></div> 
</div>