Block Formatting Context (BFC)

What is landing

Introducing W3C CSS2.1 concepts

It is a rendering area on the page and has a set of rendering rules. It determines how its children will be positioned and how they will relate and interact with other elements.Copy the code

Rules for rendering and displaying block-level elements. In layman’s terms, the BFC can be thought of as a large, closed box in which the children of the container do not affect the elements outside the container, and the elements outside the container do not affect the elements inside the container.

What does the BFC do

  • Fixed height collapse caused by floating elements.
  • Avoid unexpected margin folds.
  • Implement flexible and robust adaptive layouts.

How do I trigger the BFC

If any of the following rules are met, the BFC rules are triggered

  • The root element.
  • The value of float is not None.
  • The value of position cannot be relative or static.
  • Overflow is not visible or clip.
  • The display value is either table-cell, table-caption, or inline-block.
  • The display value is flow-root, or the display value is flow-root list-item.
  • Display flex items: a direct child of an element whose display value is flex or inline-flex (the child of display is not Flex, grid, or table).
  • Grid items: a direct child of an element whose display is grid or inline-grid (the child of display is not Flex, grid, or table).
  • Contain contains any of layout, Content, paint, or strict.
  • Column-span Specifies the element set to all.

Display: flow-root, contain: layout, etc. have no side effects, can trigger the BFC without affecting the existing layout.

reference

The rules of the landing

1. The inner boxes will be placed vertically, one by one

This is easy to understand. Block-level elements occupy a row by default, even if the BFC rule is not triggered.Copy the code

The BFC is an isolated, standalone container on the page

When the BFC rule is triggered, the box will not be affected by the outside, that is, the outside of the box inherited properties, will not affect the current container.Copy the code

3. The upper and lower margins of two adjacent boxes belonging to the same BFC will overlap

There is a problem, here two divs are used margin 20px; But the effect is only 20px; <div style=" height: 100px; color: RGB (0, 0, 0); width: 400px; background-color: hotpink; margin:20px;" ></div> <div style="height: 100px; width: 400px; background-color: skyblue; margin:20px;" ></div> </div> solve the problem so that the overlapping boxes are not in the same BFC container, then it is ok to trigger the BFC rule. <div> <div style=" height: 100px; width: 400px; background-color: hotpink; margin:20px;" ></div> <div style="overflow: hidden;" > <div style="height: 100px; width: 400px; background-color: skyblue; margin:20px;" </div> </div> </div> margin-bottom: 40px; Of course, there must be other places where this rule can be used, such as encapsulating components.Copy the code

4. Two father and son Box margins belonging to the same BFC will collapse

<div style="margin-top: 20px; height: 200px; width:500px; background-color: hotpink"> <div style="height: 100px; width: 400px; background-color: skyblue; margin:20px;" ></div> </div> Resolve the problem by giving the parent box overflow: hidden; If the BFC rule is triggered, external influences are not affected. <div style="overflow: hidden; margin-top: 20px; height: 200px; width:500px; background-color: hotpink"> <div style="height: 100px; width: 400px; background-color: skyblue; margin:20px;" ></div> </div>Copy the code

5 When calculating the height of the BFC, the floating element is also involved in the calculation

So when our box contents are floating, and the parent box has no height, no height that affects the overall layout. We can also solve this problem when we trigger the BFC rule. <div style="margin-top: 20px; width:500px; background-color: hotpink"> <div style="float: left; height: 100px; width: 400px; background-color: skyblue;" <div style="overflow: hidden; margin-top: 20px; width:500px; background-color: hotpink"> <div style="float: left; height: 100px; width: 400px; background-color: skyblue;" ></div> </div>Copy the code

The left side of each element touches the left side of the contained box, even if there is a float

This is actually similar to standard flow. Wrapped in a separate container.Copy the code

7 BFC areas do not overlap with float

The same is true for standard flow.Copy the code

IFC Inline Formatting Context

Inline format context exists in other format context

Most of the time, this is used for mode loading

  • The width/height of the box is determined by the contents
  • The boxes are placed horizontally, one after the other, starting at the top of the containing block.
  • The space occupied by the horizontal inside and outside margins + borders of these boxes is taken into account; In the vertical direction, the boxes may be aligned in different ways: horizontal margin, padding, not vertical. Unable to specify width and height, that is, not fully applicable to box models;

FFC (Flex Formatting Context)

Elastic formatting contexts are defined in CSS3.

Flex Formatting Contexts, elements with display value flex or inline-flex will generate adaptive containers for mobile applications.

The Flex Box consists of a Flex container and a Flex project. You can get a flex container by setting the display attribute of the element to flex or inline-flex. A container set to Flex is rendered as a block-level element, while a container set to inline-flex is rendered as an inline element

Each child element in a scaling container is a scaling item. There can be any number of scale items. All elements outside the flex container and inside the flex project are unaffected. Simply put, Flexbox defines how scalable items should be placed within a scalable container

Grid Formatting Context (GFC)

The raster formatting context is defined in CSS3.

GridLayout Formatting Contexts – When dispaly is set to Grid for an element, it will get a separate rendering area. We can define grid, row and column properties for grid items to define location and space for grid items

So what’s the use of GFC? What’s the difference between GFC and TABLE? It’s also a two-dimensional table, but GridLayout has richer attributes for controlling rows and columns, controlling alignment, and finer rendering semantics and controls

If you don’t understand anything, or if there are any inadequacies or mistakes in my article, please point them out in the comments section. Thank you for reading.