Как вы удерживаете родителей всплывающих элементов от разрушения? [Дубликат]

Я использую 2 и 4, где применимый (т.е. когда я знаю высоту содержания или если переполнение не вредит). Где-либо еще я иду с решением 3. Между прочим, Ваше первое решение имеет преимущество перед 3 (что я могу определить), потому что это не является больше семантическим, так как это использует тот же фиктивный элемент.

Между прочим, я не был бы обеспокоен четвертым решением, являющимся взломом. Взломы в CSS только были бы вредны, если их базовое поведение подвергается реинтерпретации или другому изменению. Таким образом, Ваш взлом, как гарантировали бы, не будет работать. Однако в этом случае Ваш взлом полагается на точное поведение, которое overflow: auto предназначено для имения. Никакой вред в подтягивании бесплатной поездки.

Я обычно использую эти overflow: auto прием; хотя это не, строго говоря, надлежащее использование для переполнения, это отчасти связано - достаточно, чтобы облегчить помнить, конечно. Значение float: left само было расширено для различного использования более значительно, чем переполнение находится в этом примере, IMO.

Хотя код не является совершенно семантическим, я думаю, что это более просто для имения то, что я называю "очищающимся отделением" у основания каждого контейнера с плаваниями в нем. На самом деле я включал следующее правило стиля в свой блок сброса для каждого проекта:

.clear 
{
   clear: both;
}

, Если Вы разрабатываете для IE6 (бог помогают Вам), Вы могли бы хотеть дать этому правилу 0px высоту строки и высоту также.

Идеальное решение состояло бы в том, чтобы использовать inline-block для столбцов вместо плавания. Я думаю, что поддержка браузера довольно хороша, если Вы следуете (a) применяются inline-block только к элементам, которые обычно встроены (например, span); и (b) добавляют -moz-inline-box для Firefox.

Проверка Ваша страница в FF2 также, потому что у меня была тонна проблем, когда вложенные определенные элементы (удивительно, это - один случай, где IE работает намного лучше, чем FF).

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

• {clear: both; }
• clearfix

Как только вы поймете, что происходит, используйте метод ниже, чтобы «очистить» это.

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Демонстрация :)

Вместо того, чтобы помещать overflow: auto в родительский объект, поместите overflow: hidden

Первый CSS, для которого я пишу любая веб-страница всегда:

div {
  overflow:hidden;
}

Тогда мне не о чем беспокоиться.