Частой путаницей с моделью float в CSS является необходимость «очищающего» элемента под чем-то, что перемещается, если вы хотите, чтобы содержащий элемент элемента полностью содержал его. Эрик Мейер Содержит Поплавки дает отличное объяснение этой проблемы.
К сожалению, стандартный метод для решения этой проблемы включает добавление к документу некрасивой дополнительной разметки, чтобы действовать как «более понятный». Часто можно использовать преимущества другого элемента в документе, но часто такой элемент недоступен, и необходимо добавить дополнительный очищающий элемент.
Тони Аслетт опубликовал статью (также обсуждаемую здесь ), объясняющую способ решения этой проблемы. Он начинается с наблюдения, что псевдоэлемент CSS: after может использоваться в браузерах с хорошей поддержкой CSS 2 для добавления эффективного очищающего элемента с использованием самого CSS:
.floatcontainer:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}
Этого достаточно для решения проблемы в большинстве современных браузеров, соответствующих стандартам, с очень заметным (и не совсем неожиданным) упущением Internet Explorer для Mac и Windows. Тони предлагает исправления для этих браузеров, которые используют ряд хаков CSS, включая тот, который основан на задокументированной ошибке в плавающей модели IE / Windows.
Я склонен проявлять осторожное отношение к технике, которая включает в себя несколько взломов браузера, поскольку всегда есть вероятность недокументированных ошибок, связанных с непредсказуемым взаимодействием. Стоит прочитать подробности этой методики, поскольку вы наверняка узнаете кое-что о модели с плавающей точкой CSS и / или неправильном обращении с ней в IE, но я бы порекомендовал осторожность, когда речь идет о ее реализации. Тем не менее, это еще один инструмент для ящика для инструментов.