1. Что такое БФК
Контекст форматирования — это понятие в спецификации W3C CSS2.1. Это область рендеринга на странице и имеет набор правил рендеринга, которые определяют, как будут расположены его дочерние элементы и как они будут связаны и взаимодействовать с другими элементами. Наиболее распространенными контекстами форматирования являются контекст блочного форматирования (сокращенно BFC) и контекст встроенного форматирования (сокращенно IFC).Контекст форматирования блока буквально переводится как «контекст форматирования на уровне блока». Это независимая область рендеринга, в которой участвует только блок уровня блока, он определяет, как размещается внутренний блок уровня блока, и не имеет ничего общего с внешней частью этой области..С точки зрения непрофессионала, BFC — это контейнер для управления элементами блочного уровня.
2. Как создать BFC
- Поплавок слева | справа
- ПЕРЕПОЛНЕНИЕ скрыто | Авто | Прокрутка
- display is table-cell|table-caption|inline-block|inline-flex|flex
- позиция абсолютная | фиксированная
- корневой элемент
3. Правила компоновки БТЦ:
- Внутренние блоки будут размещены вертикально один за другим (т. е. элементы уровня блока на отдельной строке).
- BFC регион не перекрывается с поплавковой коробкой (Используйте это для достижения адаптивной макеты двух столбцов).
- Вертикальное расстояние внутренней коробки определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться (Три условия перекрытия полей: принадлежность к одному и тому же BFC; соседние элементы; элементы уровня блока.).
- При расчете высоты БФК в расчете также участвуют плавающие элементы. (очищает плавающий haslayout)
- BFC — это изолированный и независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы. Наоборот.
4. Каковы характеристики BFC
Функция 1: BFC предотвращает схлопывание вертикальных полей
Согласно определению BFC, два элемента могут перекрываться вертикальными полями, только если они принадлежат одному и тому же BFC., это включает соседние элементы или вложенные элементы, если между ними нет блокировки (Например, границы, непустое содержимое, отступы и т. д.), происходит перекрытие полей.
① Проблема перекрытия полей соседних элементов одного уровня
<style>
p{
color: #fff;
background: #888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>ABC</p>
<p>abc</p>
</body>
<style>
p{
color: #fff;
background: #888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
.wrap{
overflow:hidden;
}
</style>
<body>
<p>ABC</p>
<div class="wrap">
<p>abc</p>
</div>
</body>
②Проблема перекрытия полей родительского и дочернего элементов
<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
background:yellow;
}
.wrap h1{
background:pink;
margin:40px;
}
</style>
<body>
<div class="box">box</div>
<div class="wrap">
<h1>h1</h1>
</div>
</body>
Функция 2: BFC не перекрывает плавающие элементы
Используя это свойство, мы можем создатьАдаптивный двухколоночный макет.
<style>
.box1{
height: 100px;
width: 100px;
float: left;
background: lightblue;
}
.box2{width: 200px;
height: 200px;
background: #eee;
}
</style>
<body>
<div class="box1">我是一个左浮动的元素</div>
<div class="box2">喂喂喂!大家不要生气嘛，生气会犯嗔戒的。悟空你也太调皮了，
我跟你说过叫你不要乱扔东西，你怎么又……你看，我还没说完你就把棍子给扔掉了!
月光宝盒是宝物，你把它扔掉会污染环境，要是砸到小朋友怎么办，就算砸不到小朋友，
砸到花花草草也是不对的。</div>
</body>
Особенность 3: BFC может содержать float----clear float
Все мы знаем, что числа с плавающей запятой выходят за рамки потока документов, поэтому давайте рассмотрим следующий пример:
<style>
.box1{
width:100px;
height:100px;
float:left;
border: 1px solid #000;
}
.box2{
width:100px;
height:100px;
float:left;
border: 1px solid #000;
}
.box{
background:yellow
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
Поскольку два элемента div в контейнере являются плавающими и находятся вне потока документа, ширина содержимого родительского контейнера равна нулю (то есть происходит коллапс высоты), и дочерний элемент не может быть обернут. Чтобы решить эту проблему, просто превратите родительский элемент в BFC. Обычный подход — установить overflow:hidden для родительского элемента.