ясно: право также делает ясно: слева ?? Странное плавающее поведение - PullRequest
Новая
       3

ясно: право также делает ясно: слева ?? Странное плавающее поведение

1 голос
/ 07 января 2012

Кажется, что clear: right вызывает также clear: left для всех последовательных операций с плавающей точкой!См. http://jsfiddle.net/Mx7zu/11/ или этот код: 

<html>
<head>
<style>
div { margin: 16px; width: 200px; height: 130px; border: solid red 1px; }
#right1 { float: right; }
#right2 { float: right; clear: right; }
#left1, #left2 { float: left; }
</style>
</head>
<body>
<div id="right1">Right 1</div>
<div id="right2">Right 2</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
</body>
</html>

Я бы ожидал, что divs left1 и left2 будут сверху, на том же уровне, что и right1!Это происходит только тогда, когда я помещаю div с clear: right (right2) в качестве последнего: 

<div id="right1">Right 1</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
<div id="right2">Right 2</div>

Не могли бы вы объяснить это странное поведение?Заранее спасибо!Протестировано в FF 9.0.1.

1 Ответ

3 голосов
/ 07 января 2012

Думайте о браузере как о том, что по умолчанию выкладываете страницы слева направо и сверху вниз.

Первоначально отправная точка для контента находится сверху, слева.

Сжатие float:right из #right1 оборачивает элемент div и перемещает его в правую сторону. Место слева от него доступно для другого контента.

Сжатие float:right из #right2 оборачивает div и пытается также переместить его в правую сторону. Но clear:right мешает ему идти рядом с #right1 div. Таким образом, отправная точка для содержимого, подлежащего размещению, перемещается вниз до тех пор, пока не будет успешно размещен элемент #right2. Затем он помещается справа.

Затем ставится #left1 div. Сокращение float:left оборачивает элемент div и пытается поместить его в начальную точку для содержимого, которое теперь находится непосредственно слева от #right2. Так как пространство слева от #right2 достаточно велико, чтобы вместить #left1, вот где находится #left1.

Аналогичным образом, пространство слева от #right2 и справа от #left1 достаточно велико, чтобы вместить #left2, вот где находится #left2.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...