почему div-фон не содержит внутреннего элемента, если не указан float?

Question

У меня есть блок HTML, как это. Судя по цвету фона div, внешний div не содержит внутренний div, если я не уберу float: left из внутреннего div или добавлю float left во внешний div. Это почему? http://jsbin.com/ihiqoz/2/edit

<div style="width:900px; background-color:#1EFF1E">
    <p>outside</p>
    <div style="float:left; width: 25%; background-color:#BD78C8">
        <p>inside</p>
    </div>
</div>

Answer 1

Вам нужно очистить ваш float:

<div style="width:900px; background-color:#1EFF1E">
    <p>outside</p>
    <div style="float:left; width: 25%; background-color:#BD78C8">
        <p>inside</p>
    </div>
    <div style="clear: left;"></div>
</div>

Плавающие элементы вырываются из макета, поэтому ваш div не учитывается элементами вокруг него.Свойство clear css заставляет элемент перемещаться после последнего плавающего элемента, поэтому, когда вы помещаете пустой div под плавающим элементом, присваивая ему стиль clear, внешний div растягивается, чтобы содержать его.

Answer 2

@ луч;если у вас есть float в вашем дочернем элементе, поэтому вам нужно clear это parent, поэтому просто напишите overflow:hidden в его родительском div в clear it.

Например:

<div style="width:900px; background-color:#1EFF1E; overflow:hidden">
    <p>outside</p>
    <div style="float:left; width: 25%; background-color:#BD78C8">
        <p>inside</p>
    </div>
</div>

прочитайте эту статью для более http://www.quirksmode.org/css/clearing.html

Answer 3

Вы также можете добавить <BR> в конце div, после плавающего.

Редактировать: Вам нужно очистить div.