FC

FC stands for Formatting Context. FC is a set of rendering rules within an element of an HTML page that determine how its children are laid out and where they and other elements are placed in the HTML page.

For example, a BFC is a block formatting context, which is a rendering area used to arrange block formatting boxes. For example, a DIV whose position is absolute(one of the conditions that trigger BFC) is a BFC.

Common FC and

  • Inline formatting context (IFC) refers to the rendering rules within inline formatting context
  • GFC (Grid Formatting Context, display grid elements within the rendering rules)
  • FFC(Flex formatting context, display rendering rules within flex elements).

What is triggering XFC(x stands for one of B,I,G,F)?

That is, to make an element apply certain rendering rules by setting its attribute values. For example, setting the display attribute of a div to grid triggers a GFC. A GFC is formed within the element, and the rendering rules within the element use the GFC rules

BFC

How do I trigger the BFC?

How do you create a BFC environment within an element

An element satisfies one of the following conditions to form a BFC

  1. The element is the root element, i.e<html></html>Inside the tag is a BFC environment
  2. The value of float is not None
  3. The value of overflow is not visible
  4. The display value is inline-block, table-cell, and table-caption
  5. The value of position is absolute or fixed

BFC rendering mechanism (BFC feature)

1. In the context of block formatting, vertically arrange boxes one by one, starting at the top of the containing block.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

The first feature, which I don’t think is properly described, is that block-level boxes are placed vertically on top of each other

So what is a block box? The following is a description of block-level boxes from the W3C documentation

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.

Block-level elements are those that are considered blocks in the source document (for example, paragraph P tags). Elements with display attributes as follows are block-level elements: block, list-item, table

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level elements may generate additional boxes in addition to the principal box: ‘list-item’ elements. These additional boxes are placed with respect to the principal box.

Block-level boxes are those that participate in block-level formatting context (duh -_-). Each block-level element produces a major block-level box that holds child elements and generated content, and is the element involved in positioning mode. Some block-level elements may also produce subsidiary boxes in addition to the main box such as the list-item(Li) element

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

In addition to the table box and replacement elements described in a later chapter, the browser determines what elements to display based on their tags and attributes. In addition to img and input tags, block-level boxes are block-level container boxes (note the difference). A block-level container box either holds only block-level boxes, or establishes an inline formatting context, and therefore only holds inline boxes. Not all block-level container boxes are block-level boxes: non-replacement inline blocks and cells (TD, TH) are not block-level boxes. A block box can be both a block box and a block container. The last sentence is also drunk, the next level is limited, can not get the meaning of the original meaning.

The three terms “block-level box,” “block container box,” and “block box” are sometimes abbreviated as “block” where unambiguous.

The terms “block-level box”, “block-container box” and “block-box” can sometimes be shortened to “block” when there is no ambiguity. (I misunderstood this sentence at first, thanks @tipwheal!)

So what is unambiguous? “Block-level box”, “block-container box”, and “block-box” are all block-level boxes that can be abbreviated as blocks, i.e., elements that diplay as blocks. (I’m not sure, if some friends understand, I hope you can leave a message in the comments)

2. The vertical distance is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.

The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

This vertical distance is determined by margin and is easy to understand without elaboration. Margins of two adjacent boxes belonging to the same BFC will overlap

There are two main cases of this overlap: 1. Two adjacent elements above and below; 2. Margin of parent element and child element overlap

Margins of adjacent elements above and below overlap

The rule of overlap is that the vertical distance between the two depends on whose margin is large

verify

.top, .btm { width: 200px; height: 200px; }. Top {margin-bottom: 20px; background: deepskyblue; } .btm { margin-top: 30px; background: darkorange; }Copy the code
<div id="app">
    <div class="top"></div>
    <div class="btm"></div>
</div>
Copy the code

In this case, the distance between top and BTM is not 50px, but 30px

The middle part of the figure on the left is the margin-top of TOP, and the middle part of the figure on the right is the margin-top of BTM. It can be seen that the distance between the two is the margin-top of BTM

So the question is, how to eliminate the upper and lower margin overlap?

Add float to the upper and lower elements that need to remove margin overlap

.top, .btm { width: 200px; height: 200px; Float: left; clear: both; Margin-bottom: 20px; margin-bottom: 20px; margin-bottom: 20px; background: deepskyblue; } .btm { margin-top: 30px; background: darkorange; }Copy the code

You can also use border and padding instead of margin to achieve the desired effect.

I don’t think it’s necessary to eliminate margin overlap between two adjacent elements unless you want to achieve some effect

Margin of the parent element overlaps with that of the child element

If the parent element’s margin-top is 0, the padding-top is 0, and there is no border, and the child element’s margin-top is not 0, then the distance above the parent element will be the child element’s margin-top, and margin-bottom will be the same

Take a chestnut

* {
  padding: 0;
  margin: 0;
}
#app {
  background: yellowgreen;
}

.top {
  background: deepskyblue;
  height: 200px;
  margin: 20px;
}
.footer {
  height: 200px;
  width: 200px;
  background: yellow;
}
Copy the code
<div id="app">
    <div class="top"></div>
</div>
<div class="footer"></div>
Copy the code

You can see that the parent app element has margins on top and bottom

Method to eliminate parent-child margin overlap:

  1. Add a border to the parent element
  2. Set the padding or margin of the parent element
  3. Add overflow: Hidden to the parent element

3. The region of the BFC does not overlap the element region of float.

<div class="left"></div>
<div class="main"></div>
Copy the code
.main {
  background: deepskyblue;
  width: 400px;
  height: 400px;
}
.left {
  float: left;
  width: 200px;
  height: 200px;
  background: darkorange;
}
Copy the code

The browser renders the result as shown below

Main overlaps left

While setting Overflow: Hidden

.main {
  background: deepskyblue;
  width: 400px;
  height: 400px;
  overflow: hidden;
}
Copy the code

You eliminate the effect of float

You can use float to create text wrap, but you can also use this feature to eliminate text wrap

4. In the context of block formatting, the outer left edge of each box isContaining blockTouch the left edge of (for right-to-left formatting, the right edge touches)

In the context of block formatting, the outer left edge of each box touches the left edge that contains the block (note the noun) (for right-to-left formatting, the right edge touches). This is true even if a float exists (although a box’s Box’s line boxes may shrink because of the float), unless the box establishes a new block format context (in which case the box itself may become narrower because of the float).

The original article reads like this

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

This passage has been interpreted in many Chinese versions on the Internet, leading to ambiguity

To really understand this statement, we have to understand the concept of what is a containment block?

In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box “establishes” the containing block for its descendants. The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates.

In CSS 2.1, the positions and sizes of many boxes are calculated based on the edges of a rectangular box called a containment block. Typically, the generated box acts as a block containing subboxes; We say that a box “builds” the block containing it for its descendants. The phrase “a box’s contains block” means “the contained block that the box is in,” not the block it generates.

Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

Each box is assigned a position relative to its containing block, but is not bound by that containing block; It may overflow.

Is the containing block of all elements the content-box of its parent element?

Of course the answer is: No!!

Suffice it to say that in most cases, the contain block is the content area of the element’s nearest ancestor block element. It is possible that an element’s containing block has nothing to do with its immediate parent. As an example, an element whose position is absolute consists of a block containing the edge of the inner margin of its ancestor element whose nearest position is not static (fixed, Absolute, relative, or sticky). For further research please refer to the inclusion blocks I learned in this article

When we look at this property after we understand the concept of inclusion blocks, it suddenly becomes clear.

So even if there is a float, how do you understand that? We know that when we set float to an element, as long as it is wide enough, the elements will be aligned horizontally one by one. From the second element on, we won’t touch the edge of the containing block. Is the document wrong?

The rest of the document says that unless box establishes a new block format context, adding a float attribute to the element forms a new BFC, so the documentation is accurate

5. When calculating the height of the BFC, the floating element also participates in the calculation

This feature is the key to solving the problem of child element floating and parent element not being able to pop

.main {
  background: deepskyblue;
}
.main div {
  height: 100px;
  width: 100px;
  float: left;
}
Copy the code
<div class="main">
    <div></div>
    <div></div>
</div>
Copy the code

The above rendering results in a blank page…

After making class the parent div of main form the BFC

.main {
  background: deepskyblue;
  position: absolute;  /* Trigger BFC */
}
Copy the code

Render the result as follows:

The parent element is stretched. And the width of a block-level element whose position is set to absolute does not take up the remaining space. If no width is set and there are no children, the width is 0. If there are children, the width is separated by the children

6. A BFC is a separate container on the page, and the child elements in the container do not affect the outside elements.

This feature is straightforward and requires no explanation

conclusion

Things we can do with BFC:

  1. Clear the effects of floating
  2. Clear margin overlap

Ps: I front-end small rookie a, if there is a mistake in the article, welcome you can correct visitors