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, чтобы он закрывал внутренний?ИЕ:Поместите цвет рамки/фона вокруг него?

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

Спасибо!

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

Всем привет,

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Добавьте этот раздел в конец вашего 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 так, что он работает по принципу вуду.На самом деле просмотр границ ваших элементов очень помогает, и выполнение этого в CSS означает, что вам не нужно трогать реальную разметку или основной CSS, чтобы включить границы для отладки.

Answer 6

Эта статья о CSS-системы определенно стоит прочитать.Как сказал Дарко З., поразительно видеть семантически неверный ответ, данный Антом П.