Don’t just know about KFC, you should know about BFC, IFC, GFC and FFC

preface

Speaking of KFC, we all know it is KFC 🍟, but when the interviewer asks you what IS BFC, IFC, GFC and FFC, can you answer as quickly as KFC is KFC, or you have never heard of the latter. As a front-end development engineer, You need to know all of the above FC(Forrmatting Context), and you need to be as impressed as KFC. Below I will take you to uncover the true face of these FC, if you already understand, please reward yourself a KFC ~ (pay attention to civilized language, here do not use the language 😂)

FC is a concept in the W3C CSS2.1 specification. 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.

Only BFC and IFC exist in CSS2.1, GFC and FFC exist in CSS3.

If this article helps you, ❤️ follow + like ❤️ to encourage the author, the article public account first, followThe front nine southGet the latest articles for the first time

Concept of pre –

Before we learn about the various FCS, let’s first understand some basic concepts:

Box (basic CSS layout unit)

Simply put, all pages we see are composed of boxes, which are determined by the type of the element and the display attribute.

• Block – level Box:When the element’s CSS attributedisplay 为 block.list-item 或 table, it isBlock-level elements block-level . Block-level elements (e.g<p>) visually appear as blocks, arranged vertically. Each block-level element generates at least one block-level box(block - level Box)Participating in BFC is called a primary block-level box(principal block-level box). Some elements, like<li>, generate additional boxes to place bullet points, although most elements generate only one main block-level box.
• The Inline – level Box:When the element’s CSS attributedisplayThe calculated value of inline. inline-block 或 inline-tableWhen, we call itInline level elements. Visually it arranges content in multiple rows with other inline elements. Typically paragraphs, such as text or images, are inline elements. Inline level elements generate inline-level boxes that participate in the inline formatting context IFC.
• Flex container:When the element’s CSS attributedisplayThe calculated value offlex 或 inline-flexTo call itElastic container.display:flexThis value causes an element to generate a block level(block - level)Elastic container frame.display:inline-flexThis value causes an element to generate an inline level(the inline - level)Elastic container frame.
• Grid Container: When the element’s CSS display property evaluates to grid or inline-grid, it is called a grid container.

Block Container Box

Block container boxes contain only other block-level boxes, or generate an inline formatting context that contains only inline boxes.

That is, a block container box contains either inline or block-level boxes only.

Block-level boxes describe the behavior of an element with its parent and sibling elements.

Block Container boxes describe the influence of an element on its descendants.

BLock Boxes

Block-level boxes that are also block container boxes are called block boxes

Line boxes (Line boxes)

Row boxes Boxes that are generated by inline formatting context and used to represent a row. Inside the block box, line boxes are typesetted from one side of the block box to the other. When there is a float, the row box is formatted from the far right of the left float to the far left of the right float.

OK, with those concepts in mind, let’s get back to the highlights of this article.

Block Formatting Context (BFC) Block Formatting context

What is BFC?

Block Formatting Context (BFC).

BFC determines how elements position their content and how they relate to and interact with other elements. When it comes to visual layout, Block Formatting Context provides an environment in which HTML is laid out according to certain rules.

How do I trigger the BFC?

• The root element or any other element containing it

• The float float: left/right/inherit

• Absolute position element Position: Absolute /fixed

• Inline block display: inline-block

• Table cell display: table-cell

• Table caption display: table-caption

• Overflow element overflow: hidden/scroll/auto/inherit

• Display: flex/inline-flex

BFC layout rules

• The internal boxes will be placed vertically, one on top of the other.

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

• The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.

• The region of the BFC does not overlap with the float box.

• A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.

• When calculating the height of the BFC, floating elements are also involved

BFC application scenarios

Solve block-level element vertical margin overlap

Let’s look at the following situation:

<style>
  .box{
    width:180px;
    height:180px;
    background:rosybrown;
    color:#fff;
    margin: 60px auto;
  }
</style>
<body>
    <div class="box">nanjiu</div>
    <div class="box">South nine</div>
</body>
Copy the code

According to our habitual thinking, the margin-bottom of the box above is 60px, and the margin-top of the box below is 60px, so their vertical spacing should be 120px according to the truth. (But that’s not the case. Let’s see.)

As you can see from the picture, the vertical spacing between the two boxes is only 60px, not 120px!

In this case, the margin is the maximum of the two, rather than the addition of the two, so we can use BFC to solve the problem of margin collapse.

<style>
  .box{
    width:180px;
    height:180px;
    background:rosybrown;
    color:#fff;
    margin: 60px auto;
  }
  .outer_box{
    overflow: hidden;
  }
</style>
<body>
    <div class="outer_box">
        <div class="box">nanjiu</div>
    </div>
    <div class="box">South nine</div>
</body>
Copy the code

As can be seen from the above, we wrapped the first box with another layer of container and triggered it to formBFC, the two boxes do not belong to the sameBFCThey don’t interfere with each other, so their vertical spacing is the sum of their vertical spacing.

Solve the problem of height collapse

Let’s look at the case where the inner box uses float to get out of the normal document flow, causing the outer container to not be able to hold the height and the background color to not show.

<style>
  .box{
    float:left;
    width:180px;
    height:180px;
    background:rosybrown;
    color:#fff;
    margin: 60px;
  }
  .outer_box{
    background:lightblue;
  }
</style>
<body>
    <div class="outer_box">
        <div class="box">nanjiu</div>
        <div class="box">South nine</div>
    </div>
</body>
Copy the code

From this figure, we can see that the height of the outer container is 0, causing the background color not to be rendered. In this case, we can also use BFC to solve the problem. We can directly trigger THE BFC for the outer container.

<style>
  .box{
    float:left;
    width:180px;
    height:180px;
    background:rosybrown;
    color:#fff;
    margin: 60px;
  }
.outer_box{
  display:inline-block;
  background:lightblue;
}
</style>
<body>
    <div class="outer_box">
        <div class="box">nanjiu</div>
        <div class="box">South nine</div>
    </div>
</body>
Copy the code

Remove the floating

In the early days of front-end pages, most preferred floating layouts, but floating elements were removed from the normal document flow and would overwrite adjacent content:

<style>
.aside {
  float: left;
  width:180px;
  height: 300px;
  background:lightpink;
  }
  .container{
    width:500px;
    height:400px;
    background:mediumturquoise;
  }
</style>
<body>
    <div class="outer_box">
        <div class="aside">nanjiu</div>
        <div class="container">South nine</div>
    </div>
</body>
Copy the code

We can see how the floating element affects its layout by triggering the latter element to form a BFC

<style>
.aside {
  float: left;
  width:180px;
  height: 300px;
  background:lightpink;
  }
  .container{
    width:500px;
    height:400px;
    background:mediumturquoise;
    overflow: hidden;
  }
</style>
<body>
    <div class="outer_box">
        <div class="aside">nanjiu</div>
        <div class="container">South nine</div>
    </div>
</body>
Copy the code

IFC (Inline Formatting Contexts) Inline Formatting context

What is IFC?

IFC: Inline Formatting Context, line-level Formatting Context

How do I trigger IFC?

• Block-level elements contain only inline level elements

The formation condition is very simple. Note that when a block-level element is inserted in an IFC, two anonymous blocks are generated to separate the parent element, producing two IFCs.

IFC layout rules

• Within an IFC, the child elements are arranged horizontally and horizontally, with the vertical starting at the top of the element.
• The child element will only evaluate the horizontal style space (padding, border, margin), the vertical style space will not be evaluated (padding, border, margin).
• In the vertical direction, the child elements are aligned in different ways.
• A rectangular area that can contain all the boxes on a line is called a line box. The width of the row box is determined by the containing box and the float in it.
• The IFCline boxNormally, the left and right edges are close to their contain blocks, but float elements take precedence.
• The IFCline boxThe height is determined by the CSS row height calculation rules, sameIFCUnder the multipleline boxThe height may be different.
• wheninline boxesThe total width is less than that containing themline boxWhen, its horizontal rendering rules bytext-alignProperty value to determine.
• When ainline boxBeyond the width of the parent element, it is split into multipleboxes, theseboxesSpread across multipleline boxIn the. If the child element has no forced line break,inline boxWill not be divisible, will overflow the parent element.

IFC application scenarios

The element is horizontally centered

When a block is horizontally centered in the environment, setting it to inline-block produces an IFC in the outer layer, and text-align makes it horizontally centered.

<style>
	/* IFC */
  .text_container{
    width: 650px;
    border: 3px solid salmon;
    margin-top:60px;
    text-align: center;
  }
  strong.span{
    /* border:1px solid cornflowerblue; * /
    margin: 20px;
    background-color: cornflowerblue;
    color:#fff;
  }
</style>
<body>
    <div class="text_container">
        <strong>In search of his thousands of baidu, The South nine need your attention</strong>
        <span>Suddenly look back, the man was in front of the communication group</span>
    </div>
</body>
Copy the code

Multiple lines of text are centered horizontally and vertically

Create an IFC and set it to vertical-align:middle. Other inline elements can be centered vertically under this parent element.

<style>
.text_container{
  text-align: center;
  line-height: 300px;
  width: 100%;
  height: 300px;
  background-color: turquoise;
  font-size: 0;
  }
  p{
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    background-color: coral;
    font-size: 18px;
    padding: 10px;
    width: 360px;
    color: #fff;
  }
</style>
<body>
  <div class="text_container">
    <p>Dongfeng night put thousands of trees, more blown, stars such as rain. BMW carved car fragrance full road. The sound of the flute moves, the jade pot turns, and the fish and dragon dance all night. Moths snow willow gold wisp, laughter yingying fragrance.<strong>He found thousands of baidu, suddenly look back, that person is in, the lights dim.</strong>
    </p>
  </div>
</body>
Copy the code

Grid Formatting Context (GFC)

What is the GFC?

GFC full name: Grids Formatting Contexts

Introduction: Grids, a new layout model introduced by CSS3, is not widely used at present, and the frequency of use is low, so it is easy to understand. A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. But there are also important differences. Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.

How do I trigger a GFC?

When you set the display value to grid or inline-grid for an element, the element will get a separate render area.

GFC layout rules

Define grid rows on grid Items by defining grid Definition Rows on grid Containers and grid Definition Columns properties, respectively Row and Grid Columns define location and space for each grid item (see MDN for details).

GFC application scenarios

Arbitrary rubik’s cube layout

This layout is easy to achieve with GFC, but other methods, such as relative/absolute positioning, or Flex, add several levels of complexity to the layout.

<style>
.magic{
  display: grid;
  grid-gap: 2px;
  width:300px;
  height:300px;
  }
  .magic div{
    border: 1px solid coral;
  }
  .m_1{
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .m_3{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
  }
</style>
<body>
  <div class="magic">
    <div class="m_1">1</div>
    <div class="m_2">2</div>
    <div class="m_3">3</div>
    <div class="m_4">4</div>
    <div class="m_5">5</div>
    <div class="m_6">6</div>
    <div class="m_7">7</div>
  </div>
</body>
Copy the code

FFC (Flex Formatting Context) Elastic Formatting context

What is FFC?

FFC: Flex Formatting Context

Summary: CSS3 introduces a new layout model, flex layout. Flex stands for Flexible Box, commonly known as flexible box model. Unlike other CSS3 properties, Flexbox is not a single property, but a module that contains multiple CSS3 properties. Flex layouts provide a more efficient way to lay out items within containers to accommodate all types of display devices and screens of all sizes. Using flex Box layouts essentially declares the creation of AN FFC(Adaptive Formatting Context)

How to trigger FFC?

When the display value is flex or inline-flex, flex Containers are generated, and an elastic container establishes a new elastic formatting context (FFC) for its content

FFC layout rules

• Set toflexThe container is rendered as a block-level element
• Set toinline-flexThe container is rendered as an inline element
• Each child element in an elastic container is an elastic item. There can be any number of elastic items. All elements outside the elastic container and inside the elastic item are unaffected. In a nutshell, Flexbox defines how elastic items should be laid out within an elastic container

**⚠️ Note: ** In FFC layout, float, clear, vertical-align attributes do not take effect.

Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.

FFC application scenarios

Here is only to introduce it for other layouts relatively more convenient features, in fact, Flex layout is now very common, many front-end personnel like to use Flex to write page layout, easy to operate and flexible, good compatibility.

Automatic split remaining height/width

Looking at a classic two-column layout with the side navigation bar on the left and the content area on the right, you might need to use CSS’s CALC method to dynamically calculate the remaining padding width, but with flex, you only need one property to solve this problem:

Calc dynamic calculation method:

<style>
.outer_box {
	width:100%;
} 
.aside {
  float: left;
  width:180px;
  height: 300px;
  background:lightpink;
}
.container{
  width:calc(100% - 180px);
  height:400px;
  background:mediumturquoise;
  overflow: hidden;
 }
</style>
<body>
		<div class="outer_box">
        <div class="aside">nanjiu</div>
        <div class="container">South nine</div>
    </div>
</body>
Copy the code

FFC of use:

<style>
.outer_box {
  display:flex;
	width:100%;
} 
.aside {
  float: left;
  width:180px;
  height: 300px;
  background:lightpink;
}
.container{
  flex: 1;
  height:400px;
  background:mediumturquoise;
  overflow: hidden;
 }
</style>
<body>
		<div class="outer_box">
        <div class="aside">nanjiu</div>
        <div class="container">South nine</div>
    </div>
</body>
Copy the code

conclusion

In general, what FFC can do, GFC can do, and what GFC can do, FFC can do. Generally elastic layouts use FFC, two-dimensional grid layouts use GFC, and all FFCS and GFC are also a BFC, downward compatible with the BFC specification as long as they follow their own specifications.

Now all the FC are introduced, understand clearly to reward yourself a KFC bar 😄 ~

Recommended reading

• Common front-end security problems and preventive measures
• Why are big factories using GIF as a burying point?
• Reflow & Repaint, and how to optimize?
• What is the difference between Promise, Generator, and Async?
• In 2022, don’t you know the difference between an arrow function and a normal function?
• From how to use to how to implement a Promise
• Explains the page loading process in great detail

Welcome to pay attention to the public account “Front-end South Jiu”

I’m Nan Jiu, and we’ll see you next time!!