методы очистки эффектов поплавка - PullRequest
1 голос
/ 13 июня 2011

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

  1. с использованием разметки: <div style="clear:both;"></div>
  2. Созданиеновый контекст форматирования блока:
    • является плавающим
    • абсолютно позиционирован
    • имеет значение свойства отображения одного из более необычных свойств (ячейка таблицы и т. д.)
    • переполнение

Мой вопрос: есть ли другой метод?

Большое спасибо за помощь!

Ответы [ 3 ]

4 голосов
/ 13 июня 2011

Некоторые методы, которые вы не охватили в своем вопросе:

  • 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.

0 голосов
/ 13 июня 2011

Вот отличная статья о Floats.Может даже дать некоторое понимание многолетним веб-разработчикам.

http://css -tricks.com / all-about-float /

0 голосов
/ 13 июня 2011

Вы можете установить родительский элемент плавающего элемента на overflow:hidden; или overflow:auto;.

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...