Углубленный принцип Clear Float

внешний интерфейс CSS

О поплавке

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

.warper{
    width: 200px;
    border:1px solid  #ff6633;
}
.float-1{
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.float-2{
    float: left;
    background: #ff0;
    height: 50px;
    width: 100px;
}
//html  
<div class='warper'>
    <div class="float-1"></div>
    <div class="float-2"></div>
</div>
Вы можете видеть, что высота родительского элемента равна 0. Чтобы решить эту ситуацию, следует очистить поплавок.

чистый плавучий путь

Подводя итог, можно выделить следующие категории:

1. 结尾空元素或者after等伪元素或者br 来clear
2. 父元素同样浮动
3. 父元素设置overflow为hidden或者auto 
4. 父元素display：table

Грубо классифицируя, его можно разделить на две категории, 1 использует свойство очистки, а последний можно отнести к одной категории, все они достигаются путем срабатывания BFC. Ниже приводится подробный обзор методов и принципов этих двух категорий клиринговых операций.

чистая собственность

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

//这里当然可以换成一个空的div，<br/>等，原理和效果都是一致的  
.warper:after {
    content: '';
    height: 0;
    display: block;
    clear: both;
}

В настоящее время для псевдоэлемента after установлено значение clear:both, что показывает, что я не могу принимать плавающие элементы с обеих сторон.Первоначально затронутые плавающими элементами положение псевдоэлементов находится ниже плавающих элементов, как показано на рисунке. :

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

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

BFC

Контекст форматирования на уровне блока: BFC (контексты форматирования блока)

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

Как поясняется ниже:

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

Характеристики БФК

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

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

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

Условия срабатывания BFC

В CSS3 эта спецификация была изменена и названа корневым потоком, а условия срабатывания объяснены дополнительно.

float 除了none以外的值 
 
overflow 除了visible 以外的值（hidden，auto，scroll ） 
 
display (table-cell，table-caption，inline-block) 
 
position（absolute，fixed） 
 
fieldset元素

Из вышеизложенного можно сравнить, мы упомянули, что несколькими способами запускается только BFC.
посмотреть пример

.warper{
    width: 200px;
    border:1px solid  #ff6633;
    // 下面属性任选其一
    overflow: hidden;
    overflow: auto;
    float: left;
    display:inline-block;
    position: fixed;
}

заключительные замечания

Справочная статья

Углубленное понимание CSS адаптивного макета с несколькими столбцами в соответствии с характеристиками жидкости и характеристиками BFC.
Понимание BFC в CSS

На этом содержание, связанное с очисткой поплавков, закончено. Если вы знаете, что это такое, вы должны знать, почему. Есть много способов очистить поплавки. Только усвоив принципы, вы сможете не копировать то, что говорят другие. Конечно, речь идет больше о совместном обучении и прогрессе.Для большего, пожалуйста, перейдите в блог.

Категории