Высота ОТДЕЛЕНИЯ Контейнера CSS. Плавающие вопросы о DIV

Кстати, вы хотите

div # parent> div {float: left; }

вместо

div # parent div: first-child {float: left; }

, который по-прежнему несовместим с IE6, но он будет перемещать оба дочерних DIV.

Я не поклонник clear: both; , я лучше сделаю это в примере Джонатана Сампсона:

#container { width:200px; overflow: hidden; }
.floated   { width:100px; float:left; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
</div>

Я использую класс clearfix.

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/

.clearfix {
    display: block;
}

/* End hide from IE-mac */

тогда просто используйте этот класс в каждом контейнере с плавающими элементами.

Это не проблема с четким исправлением, ребята, его проблема в том, что два его плавающих div не отображаются рядом.

Прежде всего, вам не нужно устанавливать ширину родительский div, div являются блочными элементами, что означает, что они автоматически регулируют свою ширину, чтобы занять всю ширину своего родительского элемента (в этом случае, предположительно, родительским элементом div # parent является тело).

Поскольку вы устанавливаете ширину явно И, дав ему заполнение, он потенциально может выходить ЗА пределы тела. На самом деле это не имеет значения, но если вы примените те же знания к дочерним плавающим div, и вы поймете, почему правый может быть сброшен вниз.

Во-первых, если вы явно задаете ширину div в процентах, добавлять отступы не нужно. Поскольку вы имеете дело с процентной шириной, лучше добавлять отступы к содержимому div, а не к самим div, потому что отступ ДОБАВЛЯЕТСЯ к ширине. Следовательно, если вы добавите отступ 10 пикселей к div, ширина которого составляет 49% в родительском элементе 100 пикселей, он будет иметь ширину 49 пикселей + 10 пикселей + 10 пикселей (2 стороны) для общей расчетной ширины 69 пикселей.

Поскольку вы этого не сделали. не публикуйте разметку и контент или в каком браузере вы тестируете, я не могу точно сказать, почему div удаляется. Есть две вероятные возможности.

1. Вы используете IE, который позволяет таблицам расширяться за пределы родительского div, что приведет к поломке. Попробуйте явно установить ширину таблицы в процентах от ее родительского элемента или что-то в этом роде.
2. Ширина 49% + заполнение = больше, чем [parent-width] - [left-div-width]. Это приведет к тому, что он упадет, потому что левый div и правый div слишком широки для родительской ширины.

#container { width:200px; }
.floated   { width:100px; float:left; }
.clear     { clear:both; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
  <div class="clear"></div>
</div>