Работа с текстом внутри div

Question

У меня есть текст внутри <div> БЕЗграничного свойства.

<div id="main"> 
    <div id="second"></div> 
    <p>TEXT</p> 
</div> 

CSS

#second { 
    height: 100px; 
    width: 100px; 
    background:red; 
    float:left; 
} 

#main { 
    width: 200px; 
    height: 200px; 
} 

Мой текст выравнивается, как показано на this example на вершине с другой дел.

Когда я добавляю CSS границы свойство DIV, pharagraph имеет запас применяется - see here

Почему это происходит?

Answer 1

Это неожиданное поведение происходит от использования float:left; только до одного div. Если вы используете float для p, тогда вы не получите другого поведения.

Check this demo: переключение границы вкл./Выкл.

От spec:

перемещаемого окно не будет сдвинуто влево или вправо, пока его внешний край коснется содержащий блок край или внешний край другого поплавка. Если есть строка строки, внешний верх плавающего поля выравнивается с верхней частью текущего строкового поля.

Если горизонтального помещения для поплавка недостаточно, он сдвигается вниз, пока он не подходит, или больше нет поплавков.