Проблему закрытия плавающих элементов изучали многие, но решения разные, и не каждый метод идеален. Закрытие плавающих элементов (или очистка плавающих элементов) — проблема, часто встречающаяся в веб-стандартном дизайне. Поэтому здесь я хотел бы обобщить несколько часто используемых методов и сравнить простоту их использования и применимые среды. Если у вас есть лучший способ, пожалуйста, вынесите его на обсуждение.

Самый простой случай — мы включаем небольшой элемент div фиксированной ширины (например, навигацию, ссылку и т. д.) в большой элемент div вместе с другим содержимым элемента. Например, следующий код:

Мы можем установить значение ширины (например, 20%) для «#inner», но поскольку div — это элемент уровня блока, даже если мы установим ширину, содержимое за ним может отображаться только в следующей строке, если мы не установим ширину. дайте ему Установить свойство float (либо плавать влево, либо плавать вправо). Тогда в это время возникнет проблема, о которой мы говорили выше.

Это не будет проблемой, если «#inner» имеет меньшую ширину и высоту, чем «#outer».

Однако если высота «#inner» превышает высоту «#outer», то нижняя часть будет превышать нижнюю часть «#outer». Это связано с тем, что после того, как мы установили атрибут float для «#inner», он вырвется из потока текста, и независимо от того, как изменяются его ширина и высота, «#outer» не последует за изменением.

Решение:

1) Метод дополнительных тегов.

Первый метод, рекомендованный W3C, — использование дополнительных тегов. Этот метод заключается в добавлении пустого тега в конец содержимого. Типичный подход заключается в использовании чего-то вроде:

Или используйте

Этот метод заставляет внешний контейнер расширяться за счет добавления элемента HTML. Однако этот метод добавит дополнительные теги и сделает структуру HTML менее лаконичной.

Примечание. Я обнаружил, что в Internet Explorer (6 или 7)
может очищать плавающие элементы, но не может закрывать плавающие элементы. Эта проблема не существует в Firefox. Я не знаю, почему. ? !

2) Используйте псевдокласс after,

чтобы добавить новый контент в конец указанного текущего контента, используя псевдокласс after и объявление контента. Распространенный подход — добавить «точку», потому что она меньше и менее заметна. Затем мы используем его, чтобы очистить плавающий элемент (закрыть плавающий элемент) и скрыть содержимое:
#outer:после{
содержание:".";
высота: 0;
видимость: скрыта;
дисплей: блок;
ясно: оба;

Странно то, что Internet Explorer 6 и ниже в Windows не поддерживает псевдокласс after в CSS 2.1, но Internet Explorer в Mac можно использовать нормально, поэтому нам придется иметь дело с Win/IE отдельно. Среди множества способов отличить Internet Explorer в Win и Mac наиболее часто используемым методом является трюк Холли, код CSS:
/* Этот код виден только IE/Win*/
CSS-правила
/*End Hack */

В приведенном выше коде есть две строки комментариев, и в конце первой строки появляется обратная косая черта (). Internet Explorer на Mac будет думать, что комментарий не закончился, поэтому он будет продолжаться до тех пор, пока не будет выполнено. В первой строке появляется полный символ «*/», и все символы в середине считаются комментариями, но IE/Win будет рассматривать как комментарии только первую и третью строки, а средние — действительные коды. Вот это и отличает IE на разных платформах.

Основываясь на вышеизложенных принципах, для очистки плавающих значений в IE 6 в Windows можно использовать следующий код:

#outer {
дисплей: встроенный блок;
}
/* Холли Хак Бегин */
* html #outer {
высота: 1%;
}
#outer {
дисплей: блок;
}
/* Конец взлома */

PS Если вы не считаете пользователей IE6/Mac, вам нужно написать только * html #outer {height:1%;}.
Кроме того, похоже, что display:inline-block не работает в Internet Explorer 7. Так что используйте самые полные приемы взлома.

3) Плавающие внешние элементы. Метод float-in-float

очень прост и заключается в перемещении элемента «#outer» (влево или вправо).

Однако другая проблема, вызванная этим методом, заключается в том, что следующий элемент, соседний с «#outer», будет затронут «#outer», и его положение изменится, поэтому вы должны быть осторожны при использовании этого метода. Существует возможность разместить все элементы на странице и, наконец, использовать соответствующий значимый элемент (например, нижний колонтитул) для очистки плавающих элементов. Это помогает уменьшить ненужную разметку, но слишком большое количество плавающих элементов увеличит сложность макета.

4) Установите для переполнения значение скрытое или автоматическое.

Установите значение переполнения атрибута «#outer» на скрытое или автоматическое, чтобы также очистить плавающие элементы.

Этот метод не требует добавления дополнительных тегов. Но будьте осторожны при использовании переполнения, поскольку оно влияет на производительность браузера. Кроме того, простая настройка скрытого или автоматического переполнения в Internet Explorer 6 не может эффективно очистить плавающий элемент (закрыть плавающий элемент). Вы также должны указать размер «#outer», то есть указать для него ширину или высоту. :
#outer {
переполнение: авто;
ширина: 100%;
}

Примечание. Если вы хотите использовать этот метод для очистки плавающих элементов (закрытия плавающих элементов) в IE5/Mac, вам необходимо установить для атрибута переполнения значение «скрытый».

Сравните и выберите,

какой из четырех методов лучше? Прежде всего, не рекомендуется использовать псевдокласс after. По сравнению с тремя другими методами, трюк с холли слишком громоздкий и трудный для освоения. Упомянутый выше трюк с холли — проблема не только в IE/. Win. Когда появится:hover, возникнут и другие проблемы, поэтому мы добавили такие атрибуты, как inline-block, а это значит, что в этом методе больше неопределенности. Рекомендуется для людей, которые «чисты» в коде и обладают высокими техническими навыками.

Тогда можно будет рассмотреть остальные три метода. Однако при использовании переполнения это может повлиять на производительность страницы, и это влияние является неопределенным. Лучше всего протестировать вашу страницу в нескольких браузерах

и использовать дополнительные теги для очистки плавающих элементов (закрыть элемент float). со стороны W3C. Что касается использования элементов
или пустого