This is the 25th day of my participation in Gwen Challenge

preface

Speaking of BFC, some unfamiliar children’s shoes often have two situations: 1. They use BFC but don’t know it exists, 2. I have heard the name of BFC and then CV a passage on Overflow: Hidden and solved the problem without asking the bottom line. I was once one of them. Thinking is not clear how to do? Ask Google niang bai ~ read a lot of articles, know that I do not have the ability of photographic memory, or feel that I want to write by myself, on the one hand to deepen the impression, and on the other hand to facilitate the traceability of the future, so I write this article.

What is BFC?

The W3C explains it this way:

Floating elements and absolutely positioned elements, block-level containers that are not block-level boxes (such as inline-blocks, table-cells, and table-captions), and block-level boxes that do not have overflow value “unavailable”, Both create new block formatting contexts for their content.

Note that the BFC is not a CSS property, nor is it a piece of code, but rather a box-based layout object and unit in CSS. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements. Specifically, it is a separate box, and the internal layout of this separate box is not affected by the external elements, of course, the BFC does not affect the external elements.

Requirements for becoming a BFC

The basic conditions called BFC are already outlined in the W3C specification, but let’s go through them in detail to keep the memory clear.

A BFC is an HTML box that meets at least one of the following criteria:

  1. The value of float is not None
  2. The value of position cannot be static or relative
  3. The display value is table-cell, table-caption, inline-block,flex, or one of them
  4. The value of overflow is not visible
  5. The root element

The characteristics of landing

The characteristics of BFC can be summarized as follows:

  1. Inside the BFC, boxes are arranged in order from top to bottom, and their gaps are determined by the margins of boxes. Moreover, when two boxes in the same BFC have margins in opposite directions at the same time, Margin Collapse will also occur.
  2. Inside a BFC, the left side of either a floating box or a normal box always touches the left side of the containing block (in the right-to-left format, otherwise touches the right border)
  3. The BFC region does not overlap with the float Box region
  4. The BFC layout does not affect each other
  5. When calculating the height of the BFC, the height of the floating element is also taken into account

Trigger landing

According to the conditions for becoming a BFC, the BFC can be triggered in the following four ways:

  • Display: table with a newline character before and after, we generally do not use
  • Overflow: Scroll may appear unwanted, ugly
  • Float: left What if we don’t want the element to float?
  • Overflow: Hidden is a perfect solution to create a BFC with few side effects, just like meeting my crush girl

Problems that BFC can solve

1. Solve margin collapse

What is margin overlay? When two boxes in the same BFC have opposite margins at the same time, Margin Collapse will occur. When the margins of brother boxes are not the same, the largest Margin will prevail.

2. Clear floats

Think about all the floats we’ve cleared together over the years. What’s the solution? The clear: both? Float the parent element together? All of this is true, but as front-end developers, problem solving should require multiple skills to adapt to many different problem environments, and the occasional X:)

We often encounter a situation where the height of the parent element is adaptive and the child element floats, because the height of the parent element collapses because it is not in the same document flow. In this case, we can use BFC to solve the problem. The height of the floating element is also counted when calculating the height of the BFC

We create a new BFC in the container by adding Overflow: Hidden

3. Achieve a two-column layout

General background management system, many are traditional left menu and right content of the two-column layout, we often choose to float the left column, the right set the left padding or margin idea to achieve this practice, in fact, using BFC can also create a two-column layout, according to: BFC area does not overlay with the float box area