CSS: основной вопрос макета - хранение вложенных элементов друг в друге

Question

Я продолжаю обнаруживать, что если у меня есть вложенные div внутри друг друга, и один из внутренних всплывает, то внешний не будет расширяться вокруг него.

Пример:

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

Что мне нужно сделать с внешним div, чтобы он покрыл внутренний? IE: Поместить его границы / цвет фона?

Кроме того, есть ли здесь общий принцип, против которого я сталкиваюсь? Если да, то на что мне обратить внимание, чтобы понять, что это такое?

Спасибо!

Редактировать

Привет всем,

Спасибо за ответы, семантически правильные и нет, и за ссылки.

Несмотря на то, что я буду использовать переполнение в последней работе, я оставлю ответ Ant P принятым, так как он был первым, который действительно сработал, и вытащил меня из краткосрочного затора, хотя он оскорбляет смысловые ощущения .

Как давний html-хак, пытающийся перейти к приличным макетам css, я, конечно, могу понять и сочувствовать, используя семантически некорректный хак, который выполняет свою работу, хотя я уверен, что он изменит эту привычку после этого = o )

Answer 1

Вы можете сделать это строго с CSS, используя переполнение: скрыто

<div style='background-color:red;overflow:hidden;'>
...
</div>

Answer 2

Если вы из тех, кто любит объяснения (а не просто «делает это»), вот несколько отличных статей, которые объясняют несколько методов:

Простая очистка поплавков

Как очистить поплавки без структурной разметки

Очистка поплавков

Answer 3

просто поражает, сколько раз это основная проблема для некоторых вопросов CSS по SO. Еще более поразительным является то, сколько раз кто-то дает ответ, подобный ответу Ant P. Хотя технически правильно, это совершенно семантически неправильно. Фемида абсолютно права. Просто добавьте overflow:hidden к родителю плавающих элементов div. Иногда, чтобы все было хорошо с IE, вам может потребоваться указать ширину ИЛИ высоту. Это действительно все, что нужно сделать.

Answer 4

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

Добавьте этот раздел в конец вашего CSS-файла и оставляйте его закомментированным, когда он вам не нужен:

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

Часто я обнаруживаю, что макет, который действительно работает (особенно тот, который использует «добавить <br> со стилем clear: both»), на самом деле не будет правильно вкладывать <div>, но кто-то настроил CSS так что это работает voodoo. На самом деле просмотр границ ваших элементов очень помогает, и выполнение этого в CSS означает, что вам не нужно прикасаться к вашей реальной разметке или вашему основному CSS, чтобы включить границы для отладки.

Answer 5

Если вы просто поместите внешний div, он расширится и будет содержать вложенный div. Комбинирование плавающих и не всплывающих элементов в макете обычно проблематично.

Answer 6

Эта статья о системах CSS определенно стоит прочитать. Как сказал Дарко Z, ошеломительно видеть семантически неправильный ответ, данный Муравьем П.