Плавания очень странные, потому что они не ведут себя предсказуемо по отношению к блочной модели .Вы можете ожидать, что поплавки останутся внутри своих родителей, но они этого не делают.Честно говоря, поведение поплавка очень неинтуитивно.В приведенных ниже примерах родительский объект - чирок, а поплавок - фиолетовый.
Пример кода
<!DOCTYPE HTML>
<html><head><title>Float Tests</title></head>
<style>
.parent { border: 1px solid #00ddaa; margin-bottom: 5em; }
.float { border: 1px solid #dd00bb; float: right; }
.clear { clear: both; }
p { margin: 0; }
</style>
<body>
<div class="parent">
<p class="float">Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div></div>
</div>
<div class="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p class="float">Paragraph 3</p>
<div></div>
</div>
<div class="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p class="float">Paragraph 3</p>
<div class="clear"></div> <!-- We're clearing this time -->
</div>
</body></html>
Render
Float Render http://media.banzaimonkey.net/images/forums/floats.png
Анализ
В первом примере p1 является плавающим.p1 перемещается вправо, но нижний край p1 не блокируется относительно p2, поэтому p2 скользит вверх, чтобы заполнить пустое пространство.
Во втором примере p3 является плавающим.p3 перемещается вправо, но нижний край абзаца не блокируется относительно нижнего края родительского div, поэтому border скользит вверх, чтобы заполнить пустое пространство.Это приводит к тому, что абзац появляется за пределами div.
В третьем примере p3 снова всплывает.Он перемещается вправо, как и раньше, но когда мы добавляем clear к div между p3 и родительским закрывающим div, очищенный div блокирует нижний край родителя div.
Так что же здесь происходит?
Что на самом деле float позволяет элементам ниже это обтекать его содержимое.Причудливо, он также позволяет свернуть блоки вокруг него.
Если бы p1 в нашем первом примере содержал достаточно содержимого, чтобы заполнить всю ширину родительского контейнера, мы бы не увидели никакого плавающего события.Для того, чтобы произошло плавание, ширина плавающего блока должна быть ограничена, чтобы другие элементы могли пролиться в пространство, которое в противном случае заняло бы.
Так почему же параграф 3 не всплывает наверхродительский контейнер?Потому что абзацы 1 и 2 заполняют всю ширину родительского контейнера.Если вы хотите, чтобы второй и третий абзацы были в одной строке, вам придется переместить второй абзац влево, например, так:
<div class="parent">
<p>Paragraph 1</p>
<p class="float" style="float: left;">Paragraph 2</p> <!-- Float left -->
<p class="float">Paragraph 3</p>
<div class="clear"></div>
</div>
Что выглядит как:
Два плавания http://media.banzaimonkey.net/images/forums/floats2.png
Сводка
Практическое правило заключается в том, что плавание позволяет только блокам ниже перемещаться элемент (ы).Чтобы два предмета могли использовать одну и ту же линию, вам придется плавать дважды (один раз влево, один раз вправо) или поместить сначала один элемент.Кроме того, если вы хотите, чтобы родительский элемент содержал числа с плавающей точкой, вам нужно будет добавить clear перед закрывающим тегом родителя.