Некоторые методы, которые вы не охватили в своем вопросе:
display: inline-block
- я бы не посчитал это как "an unusual display value"
, хотя обычно он не используется для очистки поплавков из-за его побочных эффектов (таких как упаковка в термоусадочную пленку): http://jsfiddle.net/CLXbc/
Класс clearfix
- это обычная техника - http://jsfiddle.net/CLXbc/1/
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
На сегодняшний день двумя наиболее распространенными методами являются overflow: hidden
и clearfix
.
Перебирая другие варианты, вот почему они не оптимальны:
"using markup:<div style="clear:both;"></div>"
- это не семантика. Брызги разбрасывания div
s по всему вашему HTML - плохой выбор.
"is floated"
- это работает, но обычно вам не нужна упаковка в термоусадочную пленку.
"is absolutely positioned"
- вы обычно не хотите, чтобы ваш элемент был абсолютно позиционирован.
"has a display property value of one of more unusual properties(table-cell,etc.)"
- display: table-cell
не работает в IE7 .. и опять же, вам не нужны побочные эффекты.
Я использую overflow: hidden
в большинстве случаев. Иногда я не могу использовать это, например здесь . В этих случаях я обычно возвращаюсь к clearfix
.