предисловие
Я никогда не понимал концепции и сценариев применения BFC, но сегодня сосредоточился на понимании этого и сделал следующее резюме.
Определение БФК
Прежде чем объяснять, что такое BFC, вам нужно представить понятия Box и Formatting Context.
Блок: основная единица макета CSS.
Блок — это объект и основная единица макета CSS.Интуитивно говоря, страница состоит из множества блоков. Тип элемента и свойство display определяют тип Box. Различные типы блоков будут участвовать в разных контекстах форматирования (контейнер, который определяет, как отображать документ), поэтому элементы внутри блока будут отображаться по-разному. Посмотрим, какие коробки есть: Блок блочного уровня: элемент, чей атрибут display является блоком, элементом списка, таблицей, создаст блок блочного уровня. И участвовать в блоке форматирования контекста; блок встроенного уровня: Элементы со свойствами отображения встроенный, встроенный блок и встроенная таблица будут генерировать блок встроенного уровня. И участвовать во встроенном контексте форматирования; окно запуска: доступно только в css3, поэтому я не буду говорить об этом здесь.
Formatting context
Контекст форматирования — это концепция спецификации W3C CSS2.1. Это область рендеринга на странице и имеет набор правил рендеринга, которые определяют, как будут расположены его дочерние элементы и как они будут связаны и взаимодействовать с другими элементами. Наиболее распространенными контекстами форматирования являются контекст блочного форматирования (сокращенно BFC) и контекст встроенного форматирования (сокращенно IFC). В CSS2.1 есть только BFC и IFC, а в CSS3 также добавлены GFC и FFC.
BFC
BFC (контекст блочного форматирования) буквально переводится как «область форматирования на уровне блоков». это концепция в спецификации W3C CSS 2.1, которая определяет, как элемент позиционирует свое содержимое и отношения и взаимодействует с другими элементами. Когда дело доходит до визуального макета, контекст блочного форматирования обеспечивает среду, в которой элементы HTML размещаются в соответствии с определенными правилами. Элементы в одном контексте не влияют на макет в других контекстах. Например, плавающий элемент образует BFC.Подэлементы внутри плавающего элемента в основном зависят от плавающего элемента, и два плавающих элемента не влияют друг на друга. Это несколько похоже на значение BFC как независимой административной единицы. Также можно сказать, что BFC — это сфера действия. Его можно понимать как самостоятельный контейнер, а компоновка коробки внутри контейнера не имеет ничего общего с контейнером снаружи
Как создать БФУ
- Значение float не может быть равным none
- Значение переполнения не может быть видимым
- Значение display может быть любым из table-cell, table-caption, inline-block.
- Значение position не является относительным и статическим
Правила ограничения BFC
- Внутренние ящики будут размещены один за другим в вертикальном направлении.
- Расстояние по вертикали определяется полем (поля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться независимо от направления).
- Левая сторона поля поля каждого элемента касается левой стороны поля границы содержащего блока (в противном случае для форматирования слева направо). даже если есть поплавок
- Площадь BFC не будет перекрывать площадь элемента поплавка
- При расчете высоты BFC в расчете также участвуют плавающие дочерние элементы
- BFC — это изолированный и независимый контейнер на странице, дочерние элементы внутри контейнера не будут влиять на внешние элементы, и наоборот
Видя вышеуказанные ограничения, напоминает мне о нескольких правилах при изучении CSS
Блочные элементы будут расширяться до той же ширины, что и родительский элемент, поэтому блочные элементы будут выровнены по вертикали. Поля двух соседних DIV по вертикали будут перекрываться, но не по горизонтали (это правило не совсем правильное) Плавающие элементы будут расположены как можно ближе к верхнему левому (или верхнему правому) краю. Установите переполнение: скрытый или плавающий родительский элемент для родительского элемента, и плавающий элемент будет включен
Роль БФК
1. Не перекрываться плавающими элементами
Если за плавающим элементом следует неплавающий элемент, происходит наложение, что и происходит во многих адаптивных макетах с двумя столбцами. Например, эффект следующего рисунка, обратитесь к примеру
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
Левая сторона поля поля каждого элемента касается левой стороны поля границы содержащего блока (в противном случае для форматирования слева направо).即使存在浮动也是如此。
Несмотря на то, что есть плавающий элемент, левая сторона main по-прежнему касается левой стороны содержащего блока. Согласно статье 4 правил компоновки BFC:
Область BFC не будет перекрываться с флоат-боксом
Мы можем добиться адаптивного двухколоночного макета, запустив main для создания BFC.
.main {
overflow: hidden;
}
При запуске main для создания BFC этот новый BFC не будет перекрываться с плавающей стороной. Поэтому он будет автоматически сужен в соответствии с шириной содержащего блока и шириной стороны. Эффект следующий:
2. Очистите поплавок внутри элемента
Код дела:
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
При расчете высоты БФК в расчете также участвует плавающий элемент
Чтобы очистить внутреннее плавание, мы можем вызвать par для генерации BFC, тогда, когда par вычисляет высоту, дочерний плавающий элемент внутри par также будет участвовать в вычислении.
.par{
overflow:hidden
}
Добавьте вышеуказанный стиль, чтобы решить проблему, эффект будет следующим:
3. Предотвратите перекрытие вертикальных полей
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
Страница выглядит следующим образом:
Вертикальное расстояние Box определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться.
Мы можем обернуть контейнер вокруг p и запустить контейнер для создания BFC. Тогда два P не принадлежат одному и тому же BFC, и перекрытия полей не будет.
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
Эффект следующий:
Некоторый контент изВолшебные принципы BFC