Блог

Иногда, когда всплывающее окно выходит из родительского поля, мне приходится добавлять «width: 100%; overflow: hidden» к родительскому, чтобы остановить это.

Итак, почему всплывающее окно может выходить из родительского? Это стандартное поведение?

 <div style=" border:1px solid #F00">
  <div style="float:left">float</div>
</div>
  

Это ловушка, в которую, я думаю, попадали все, вероятно, не один раз.

Вот несколько хороших ресурсов для понимания того, как работают CSS с плавающей точкой:

• http://css-tricks.com/all-about-floats / Смотрите раздел под названием «Великий коллапс»
• http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
• http://phrogz.net/css/understandingfloats.html

Плавающие элементы удаляются из обычного потока документов. Для того, чтобы их родительская оболочка была вокруг них, вам нужно поместить что-то после плавающего элемента с clear: набором свойств.

 <div style=" border:1px solid #F00">
  <div style="float:left">float</div>
  <br style="clear:both;" />
</div>
  

Вам нужно добавить еще один div после всплывающего div, который содержит правило стиля clear: оба. Div, содержащий единственный дочерний div с плавающей точкой, всегда будет сворачиваться и выводить его дочерний элемент.