Четыре способа очистки поплавка и его принцип понимания

CSS

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

1. Почему клиренс флоатинга

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

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>

Его стиль:

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

Эффект рендеринга в хроме показан на следующем рисунке:

浮动效果
плавающий эффект

Это определенно не тот эффект рендеринга, который нам нужен, он может иметь следующие проблемы:

  1. Текст набирается вокруг плавающих элементов, но нам может понадобиться текст (.textDiv) ниже плавающего элемента, или мы не хотим.textDivС обеих сторон есть плавающие элементы.
  2. Плавающий элемент, набранный за пределами его родителя (.topDiv), высота родительского элемента сворачивается.Если нет поддержки высоты текста, независимо от границы, высота родительского элемента сворачивается до нуля.
  3. Плавающие элементы влияют даже на братьев и сестер своего родителя (.bottomDiv) набор текста. Поскольку плавающий элемент находится вне потока документа,.bottomDivПри вычислении положения элемента его влияние игнорируется, а положение предыдущего элемента продолжает упорядочиваться.

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

Далее вы теперь введете метод очищения плавающих.

Во-вторых, метод очистки плавающих

1. Используйте ясный стиль

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

.textDiv {
    color: blue;
    border: 2px solid blue;

    clear: left;
}

Эффект рендеринга после очистки поплавка выглядит следующим образом:

объяснять:

С вышеуказанным стилем,.textDivСообщите браузеру, что плавающие элементы не разрешены слева от меня, пожалуйста, удалите плавающие элементы слева. Однако, поскольку плавающие элементы (.floatDiv) местоположение было определено, и браузер вычисляет.textDivместо, чтобы удовлетворить свои потребности,.textDivОтображается ниже плавающего элемента, гарантировано.textDivСлева нет плавающих элементов. В то же время видно, что высота родительского элемента также поддерживается, и плавание больше не влияет на рендеринг родственных элементов..textDivВсе еще в потоке документа он должен находиться в пределах границ родительского элемента, что может быть достигнуто только за счет увеличения высоты родительского элемента, что можно назвать бонусом. (clearценностьbothЭто также имеет тот же эффект.Популярное понимание заключается в том, что на какой стороне не разрешено иметь плавающие элементы, ясно значение соответствующего направления, и ни одна из сторон не разрешена.both)

Однако, если мы поместим HTML в.floatDivа также.textDivПоменяться местами?

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

несмотря ни на что.textDivПрименять очистку поплавка или нет, ситуация следующая:

.textDivПоложение первого определяется, поэтому плавающий элемент находится рядом с.textDivНиже отображается слева от родительского элемента. Однако высота родительского элемента не поддерживается, а плавающий эффект не является «внутренним», в результате чего плавающий элемент влияет на макет следующих элементов.

Кажется, что для достижения цели поддержки высоты родительского элемента используйтеclearМетод очистки поплавков все еще применим. Нам нужен более общий и надежный подход.

(Чтобы уточнить здесь, с точки зрения очистки поплавка только от элемента,clearполностью достиг своей цели, он сделал.textDivБольше нет плавающих элементов в определенном направлении.Очистка плавания только для самого элемента, который нужно очистить.Он обращает внимание только на то, удовлетворяются ли его собственные потребности, и он не имеет никакого отношения к внешнему миру.Это не обращает внимания на то, превышает ли плавание родительский элемент и влияет ли плавание на последующие элементы. Мы просто используем некоторые свойства поплавков для достижения определенных целей, но это не касается очистки поплавков, но нас может больше беспокоить то, что эти характеристики могут сделать для нас, чем очистка поплавков. Насколько я понимаю, очистка плавающего элемента и поддержка высоты родительского элемента на самом деле являются двумя разными проблемами. Здесь это можно просто понять как отношение между инструментами и целями. Далее будут обсуждаться два метода: оба используют очистку Плавающий инструмент решает проблему, а не очищает сам плавающий инструмент. Однако мы часто путаем их. Извините, это немного многословно, я не понимаю этого, потому что я не ясно выразил это, просто пропустите это. . . )

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

Структура HTML выглядит следующим образом: элемент div блочного уровня без содержимого вставляется в конец плавающего родительского элемента:

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>

Применить стили:

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}
// 区别在这里
.blankDiv {
    clear: both; // or left
}

Эффект рендеринга следующий:

Принцип не нужно много говорить, как и в первом примере.textDivПринцип применения clear для очистки плавающего элемента и увеличения высоты родительского элемента точно такой же. Здесь подчеркивается, что элемент, добавляемый в конце родительского элемента, должен бытьэлемент блочного уровня, иначе высота родительского элемента не будет поддерживаться.

3. Использование псевдоэлементов (Clearfix)

Структура HTML выглядит следующим образом, для удобства, в.topDivдобавить еще один div вclearfixДобрый:

<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

Стили применяются следующим образом:

// 省略基本的样式
// 区别在这里
.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

Стиль вclearfix, то есть в конце родительского элемента, добавляет:afterПсевдоэлемент, устраняя плавание псевдоэлемента, достигает цели поддержки высоты родительского элемента. Обратите внимание, что псевдоэлементdisplayзначениеblock, то есть это невидимый блочный элемент (где-то используемыйtable,потому чтоtableтакже является элементом блочного уровня). Как вы, возможно, поняли, это всего лишь еще один вариант предыдущего метода очистки плавающих элементов (добавление пустого элемента div), и основная логика точно такая же. Первые три метода по сути одинаковы.

4. Используйте переполнение для очистки поплавков

Сначала посмотрите на это интуитивно,overflowКак очистить плавание.

Структура HTML выглядит следующим образом:

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>

Стили применяются следующим образом:

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;

    // 区别在这里
    overflow: auto;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
    clear: both;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

Если указанный выше CSS не применяется, результат рендеринга такой же, как и у первого графического эффекта в начале этой статьи. Эффект рендеринга после применения CSS выглядит следующим образом:

Просто добавьте атрибут переполнения со значением auto к родительскому элементу, и высота родительского элемента немедленно подпирается, оборачивая плавающий элемент. Похоже, что float очищается, и float больше не будет влиять на отрисовку последующих элементов (строго говоря, это не имеет никакого отношения к очистке float, потому что нет элемента, чей float очищается, так что не беспокойтесь о Эта проблема). На самом деле значение переполнения здесь также может быть любым допустимым значением, кроме «видимого», которое может достичь цели поддержки высоты родительского элемента и очистки плавающей точки. Однако некоторые значения могут иметь побочные эффекты, например, значение прокрутки сделает полосу прокрутки всегда видимой, скрытое сделает часть за границей невидимой и т. д. Итак, как же они проводят очистку с плавающей запятой?

Чтобы прояснить принцип этого решения, всегда есть понятие, которое нельзя обойти, т.Контекст блочного форматирования (BFC)Однако это очень абстрактное понятие. Если вы хотите четко объяснить это понятие, боюсь, это займет много места. Здесь упоминается только содержание, связанное с пониманием проблемы.

Это изMDNОпределение BFC, взятое выше:

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

Перевод таков: контекст форматирования на уровне блоков является частью визуального рендеринга CSS. Это область, которая определяет, как отображаются внутренние блоки блоков и как плавающие элементы влияют друг на друга.

Контекст блочного форматирования (BFC) имеет следующие характеристики:

  1. BFC похож на барьер, который изолирует внутреннюю и внешнюю части BFC, и рендеринг внутренней и внешней областей не влияет друг на друга. BFC имеет собственный набор правил для рендеринга внутренних подэлементов, который не влияет на внешний рендеринг и не влияет на внешний рендеринг.
  2. Область BFC не перекрывает область внешнего поля плавающего блока. Другими словами, любая область внешнего плавающего элемента и область BFC различны и не могут перекрываться.
  3. Когда BFC рассчитывается, высота внутреннего плавающего элемента также рассчитывается. То есть, даже если в регионе BFC есть только один плавающий элемент, высота BFC не рухнет, а высота больше или равна высоте плавающего элемента.
  4. В структуре HTML, когда элемент, формирующий область BFC, находится рядом с плавающим полем, то есть родственным узлом плавающего поля, область BFC сначала попытается отобразиться рядом с плавающим полем, но если ширина равна недостаточно, он будет чуть ниже плавающего элемента рендера.[Смотри сюда]

С учетом этих моментов пришло время попытаться объяснить, почемуoverflow(значение неvisible), чтобы очистить поплавок.

когда элемент установленoverflowСтиль и стоитvisible, элемент создает BFC (в этом случае элемент может создавать BFC, см. документацию по CSS дляОпределение БФК). В нашем случае.topDivПоскольку значение установленоautoизoverflowстиль, поэтому этот элемент создает BFC. Согласно третьему признаку, высота BFC должна включать плавающие элементы, поэтому.topDivВысота поддерживается для достижения цели очистки плавающего эффекта. (относительно того, почему значениеvisibleизoverflowне может построить BFC,этот ответдал объяснение)

На самом деле роль переполнения здесь заключается в построении области BFC, чтобы можно было «усвоить» влияние внутреннего плавания. если ты читаешьОпределение БФК, вы обнаружите, что есть много способов построить область BFC,overflowЭто всего лишь один из них, так что здесь, можем ли мы также использовать другие способы построения BFC, а также можем ли мы достичь цели по очистке флота?

В определении BFC говорится:inline-blockТакже можно построить BFC, так что давайте попробуем это в этом стиле:

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;

    // 区别在这里
    display: inline-block;
}
// 其他样式相同，省略

Эффект рендеринга следующий:

Эффект точно такой же! Пока мы понимаем принцип, мы можем гибко развивать различные методы очистки поплавка без необходимости запоминать определенный метод.

Конечно, следует отметить, что выбор того, какой метод использовать для построения БТЭ в реальном проекте, требует конкретного анализа конкретных вопросов, поскольку необходимо учитывать роль и влияние самого выбранного стиля. В этом примере выберитеinline-blockи выберитеoverflowТочно такой же эффект, никаких побочных эффектов не видел, но это не значит, что такой же может быть осуществим в других проектах. Даже кoverflowПри выборе значения также учитываются его производительность и влияние. Среди различных способов построения BFC,overflowПуть может быть одним из наиболее контролируемых внешних воздействий, что, я думаю, может быть причиной широкого распространенияoverflowУстраним причину поплавка.

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

Ниже приводится сводка ссылок, участвующих в статье:

  1. Определение MDN BFC
  2. Определение и объяснение BFC в документах CSS, как создается BFC и внутренние правила рендеринга BFC.
  3. Почему нельзя очистить поплавок, когда видно значение переполнения, а другие значения можно, ответ на Stack Overflow
  4. Как BFC отображается при следовании за плавающим элементом

Уровень ограничен, и в статье неизбежно будут неточности или даже ошибки.Жду ваших ценных мнений!

Категории