Почему исчезает контент после float: left и float: right в стиле :)

Забывать стал разметку, использовал float в стиле и удивился, что контента после плавающих элементов не видно:

<div style="float: left;">
 <!-- содержимое левого раздела -->
</div>
<div style="float: right;">
 <!-- содержимое правого раздела -->
</div>
<!-- пропавшее содержимое -->

Хотя в исходнике страницы "пропавшее содержимое" есть. На самом деле, проблема известна - "пропавшее" содержимое уползает куда-то вверх под float-элементы.

Бороться можно такими способами:

1. Поставить свойство clear: both; тому элементу, что идёт после float-элементов:

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

2. Взять весь код с float-элементами в обрамляющий раздел с установленным overflow: auto;

<div style="overflow: auto;">
 <div style="float: left;">
  <!-- содержимое левого раздела -->
 </div>
 <div style="float: right;">
  <!-- содержимое правого раздела -->
 </div>
</div>

3. B CSS есть псевдоэлемент after, можно попытаться использовать его.

Вообще же, применять float следует с крайней осторожностью.

31.03.2016, 17:19 [5730 просмотров]