Когда div с float не распирает родителя
В процессе верстки сайта бывает необходима ситуация, когда блоки нужно расположить рядом таким образом чтобы они перескакивали на следующую строку при сжатии окна браузера.
Обычно используют div родитель с вложенными div, где стоит свойство float:left. Именно оно позволяет сбивать блоки вместе.
При построении страницы браузер использует основной поток обработки элементов, если же у блоков указано абсолютное позиционирование или свойство float:left то результат будет совсем другим, а не таким как Вы его ожидаете увидеть.
Вот, например, имеется div родитель и дочерний div со свойством float.
Высота div-родителя будет отнюдь не 100px, из-за этого у Вас скорее всего побьется верстка.
Выход из этой ситуации прост, нужно очистить поток, указав div со свойством clear:both, что запретит отображение элементов на этом же уровне. Т.е. код будет выглядеть так:
<div>
<div style="float:left; height:100px;"></div>
<div style="clear:both;"></div>
</div>
(3 votes, average: 5,00 из 5)
Loading ...
Loading ...
6 Комментариев на «Когда div с float не распирает родителя»
Фиг, в Firefox 3.6.12 не работает, видимо Вы что то не учли в этой статье. Кстати я уже час мучаюсь над вопросом как же пофиксить такой баг. Найду решение обязательно отпишусь здесь)
Ответить
Универсально лечит проблему вот такой второй div:
вместо:
Ответить
Кстати, посмотрите на моё предыдущее сообщение: у Вас в движке сайта баг: не экранируется html — а я могу и js ведь вставить с вредоносным кодом)
Ответить
Все экранируется, просто сперва кажется что нет)
Странно, я тестировал этот код везде. Попробуйте еще раз написать свое решение, просто интересно почему у вас не работает код.
Ответить
Да усе там работает просто там нада добвить немножко вот так
тоды оно удет во всех браузерах работать корректно некоторые браузеры считают что если див не занимает места и не имет контента то его просто не выводить а раз его нет значь и стиль не работает ну как то так)))
Ответить
div style=»clear:both; height:1px;»
Ответить