Почему этот блок div влияет на два плавающих элемента?

Question

Предположим, у меня есть три <div> s на моей странице:

<div id="left" class="test" style="float:left;"></div>
<div id="right" class="test" style="float:right;"></div>
<div id="footer">footer</div>

с этим css:

.test{  background:black;height:200px;width:200px;}
#footer{    background:yellow;margin:20px 0 0 0;}

Что я хочу:

• пусть "#left" смещается влево
• пусть "#right" смещается вправо
• ничего не меняет в "#footer", просто установите его на margin: 20px;

Результат ниже:

Но мне интересно, почему плавающие дивы также имеют то же поле, что и #footer.Они плавающие, поэтому они независимы от других элементов, почему #footer может повлиять на них?

Answer 1

, а также clear:both в нижнем колонтитуле, просто добавив div «обертку» контейнера вокруг элементов, это прекратится - пример

на самом деледобавление clear: both; в нижний колонтитул не даст вам промежутка между поплавками и нижним колонтитулом в 20px, вам фактически нужно будет добавить нижнее поле в 20px к поплавкам - причины все связаны .. с оформление или отсутствие оформления и его взаимодействие с Свертывание полей

Почему?

Вы сказали, что хотите знать, почемуэто происходит, в вашем сценарии OP это из-за Collapsing Margins .

В исходном примере вы не задействованы, поэтому да, поплавки удалены, поэтому поле нижнего колонтитула все еще примыкает, поэтому сворачивается с элементом body, поэтому элемент bodyполучить маржу, а затем, поскольку поплавки все еще находятся внутри body, они тоже получают маржу.

Как я уже упоминал выше, создание оболочки div для «удержания» поплавков останавливает это, потому чтоправила рушатся тоже.Тем не менее, вы выбираете содержание с плавающей запятой, либо с overflow:hidden, либо с помощью плавающей запятой «обертка» останавливает это взаимодействие, потому что .. из раздела, посвященного сворачивающимся полям:

Вертикальные поля элементов, создающих новыеконтексты форматирования блока (такие как плавающие элементы и элементы с «переполнением», отличным от «видимого») не сворачиваются со своими дочерними элементами в потоке.

вы видите, что оба изСвойства, float и «переполнение, отличное от видимого» - это средства «содержать плавающие дочерние элементы» - фактически они устанавливают новый контекст форматирования блока, но, проще говоря, большинство знают его как «содержащий float»;)

Теперь, когда у вас есть это, это исправляет ваш первый бит, но затем, если вы решите ввести clear:both в нижний колонтитул, современные браузеры не поместят отступ в 20 пикселей между поплавками и нижним колонтитулом ... этона самом деле правильно .. из раздела на clear свойство (мой жирный):

Тогда величина клиренса устанавливается на грПожиратель:

1. Количество, необходимое для размещения граничного края блока даже с нижним внешним краем самого нижнего поплавка, который должен быть очищен.

2. Количество, необходимое для размещения края верхней границы блока в его гипотетическом положении.

Чтобы разместить верхний крайнижний колонтитул под плавающей точкой (в вашем примере) браузер должен ввести 200px с просветом , что намного больше, чем 20px, поэтому оно следует правилу 1. Если верхний край нижнего колонтитула составлял 220px, то поле будетбудет больше, чем любой требуемый зазор, поэтому он будет следовать правилу 2.

Итак, если вы действительно хотите, чтобы нижний колонтитул был на 20 пикселей ниже поплавков, независимо от их высоты, вы бы поставили 20 пикселей какнижнее поле на два поплавка, чтобы он [нижний колонтитул] очищал, с помощью правила очистки 1, поплавки с требуемым зазором / запасом, независимо от того, какое из них было самым длинным.

PS: Не проверяйте вышеизложенное в IE7 или ниже - и я надеюсь, что это не было слишком скучно;)

Answer 2

Добавьте clear: both к #footer CSS.Это должно сделать нижний колонтитул рендерингом ниже плавающих элементов с нужным вам полем.

Answer 3

Я выполнил тест, прежде чем нашел эту страницу с двумя полями, на правую часть которой воздействует левая (следующая за ней): http://jsfiddle.net/4r75s/

Здесь работает трюк с переполнением, который предотвращает сворачивание родительских элементов, когда они содержат только плавающее содержимое, то есть устанавливает переполнение на скрытый, автоматический или прокрутку. Я обернул их в содержащий div, чтобы сделать это, и это работает: http://jsfiddle.net/4r75s/1/

#container {
    overflow: hidden;
}

Answer 4

Попробуйте, и это может решить вашу проблему:

<div id="right" class="test" style="float:right;"></div>
<div id="left" class="test"></div>
<div id="footer">footer</div>

CSS остается без изменений.