Блог

HTML

 <div id="div1"></div>
<div id="div2">Outside div</div>
  

CSS

 div{
   width   : 100px;
   height  : 100px;
}
#div1{
   background-color  : lightblue;
   float             : left;
}
#div2{
    background-color : blue; 
}
  

У меня есть два <div> с фиксированным размером. Один есть float:left , а другой нет. Оба <div> отображаются в одной и той же позиции. Но текст внутри второго <div> отображается вне его <div> контейнера. Почему?

Если я overflow:auto включу #div2 , второй <div> появится в другой позиции рядом с первым. Я не понимаю, что здесь происходит.

http://jsfiddle.net/c86LS/

В первом случае div1 и div2 занимают одно и то же пространство. Поле строки с текстом в должно избегать значения с плавающей точкой, поэтому, поскольку переполнение в div2 по умолчанию является «видимым», поток текста продолжается, как если бы поле div2 было выше, чем оно есть, отображаясь под полями.

Во втором случае установка div2 overflow в «auto» приводит к тому, что div2 формирует новый контекст форматирования блока. Это означает, что он начинается не в том же месте, что и div1, а рядом с ним, так что вы видите весь div1 и div2.

Используйте overflow: hidden свойство для родительского div.

Вы не назначили никакой ширины для #div1. Так, чтобы он занимал всю ширину родительского элемента. Назначьте некоторую ширину для #div1, тогда синий контейнер будет использовать оставшуюся часть.

  #div1{
 background-color: lightblue;
 float: left;
 width:50px;
 }
  

Это потому, что вы его не очистили. когда вы перемещаете элементы и не очищаете их должным образом, это вызывает проблемы с высотой. предыдущий div не занимает полную высоту.