๐Ÿงจ Hi, I’m Smooth, a sophomore SCAU front er

๐Ÿ† This article will take you through the BFC in plain English, so that you won’t be afraid to ask BFC questions in the interview!

๐Ÿ™Œ if the article is wrong, please comment section correction, thank you!

Writing is not easy, thank you for your support!

1. Common positioning schemes

Before we talk about BFC, let’s take a look at the common positioning scheme. Positioning scheme is the layout of control elements. There are three common schemes:

  1. Normal flow

In a normal stream, the elements are laid out up and down according to their sequence in HTML. In this process, the inline elements are arranged horizontally until the row is filled and line breaks, and the block-level elements are rendered as a complete new row. Unless specified otherwise, all elements default to normal stream positioning, so to say, The position of an element in a normal flow is determined by its position in the HTML document.

Not completely out of the document flow for float and completely out of the document flow for position: Absolute refer to the normal HTML flow above

  1. Float for a float, the element appears in its normal stream position and is then moved to the far left or far right of its row

  2. Absolute In an absolute positioning layout, the element is completely removed from the normal flow, and the exact position of the element is determined by the coordinates of the absolute positioning relative to the first parent element, which is not static.




Ii. Concept of BFC

Formatting context 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.

So, what is BFC?

The BFC is a block-level formatting context, a separate rendering area that isolates the elements inside the BFC from the elements outside, so that the positioning of the elements inside and outside does not affect each other.

In layman’s terms, the BFC can be thought of as a large, closed box, where the elements inside the box, no matter how turbulent, do not affect the outside.

Iii. BFC rules

  • Left of the margin box of the BFC neutron element, touching the left of the border box containing the block (BFC) (except the child element absolute)

  • The region of the BFC does not overlap with the element region of float

  • A BFC is a block-level element, and block-level elements are arranged vertically one after the other

  • A BFC is a separate container in a page, and the tags in the container do not affect the external tags

  • The vertical distance is determined by margin. The margins of two adjacent labels belonging to the same BFC will overlap, while those belonging to different BFC will not overlap

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




Iv. Conditions for triggering BFC

The BFC feature can be triggered if an element meets any of the following criteria:

  • The body root element is a BFC
  • Float element: float a value other than None
  • Absolute position elements: Position (Absolute, fixed)
  • Display inline-block, table-cell, flex
  • Overflow values other than visible (hidden, auto, Scroll)

I believe you will often see the above words when reading BFC articles, there is no case is not easy to understand, here are a few cases to take you to really master BFC

5. BFC features and applications

1. Stopmarginoverlap

For two adjacent elements in the same BFC, if the upper and lower margins are set separately, then folding occurs (take the larger one)

<head>
div{
    width: 50px;
    height: 50px;
    background: pink;
    margin: 50px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
Copy the code

In effect, since both div elements are in the same BFC container, the bottom margin of the first div overlaps the top margin of the second div, so the two boxes are only 50px apart (exactly the height of a square). Not 100px (the height of two squares).

First of all, this is not a CSS bug, we can understand it as a specification, if you want to avoid overlapping margins, you can put it in a different BFC container.

<div class="container">
    <div class="child"></div>
</div>
<div class="container">
    <div class="child"></div>
</div>
Copy the code
.container {
    overflow: hidden;
}

.child {
    width: 50px;
    height: 50px;
    background: pink;
    margin: 50px;
}
Copy the code

At this point, the margins between the two boxes are 100px









2. Clear floats

As we all know, floating elements leave the normal document flow. Consider the following example

<style>
  .container {
    width: 500px;
    border: 1px solid #000;
  }
  
  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: pink;
  }
</style>

<div class="container">
  <div class="child"></div>
</div>
Copy the code

Because the elements inside the container are floating out of the document flow, there is only 2px margin height of the outer container.

The cube doesn’t push the container apart as expected

Here’s a question for you: In what context do we use float?

There is no doubt that it is used for layout positioning!

With this answer, we can see why we want to clear the float, because we only want to use the float to layout the page as we want, but we don’t want it to affect the context elements, i.e. the normal flow of the page, so here’s how to do this.

methods

For the example above, if you want the content to float and still stretch the container height, you can trigger the container’s BFC and the container will be wrapped around the floating elements.

<style>
  .container {
    width: 500px;
    border: 1px solid #000;
    overflow: hidden;
  }
  
  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: pink;
  }
</style>

<div class="container">
  <div class="child"></div>
</div>
Copy the code

The effect is as follows:









3. The BFC prevents elements from being overwritten by floating elements

Let’s start with a text wrap effect:

<style> .left { height: 100px; width: 100px; float: left; background: green; } .none { width: 200px; height: 200px; background: grey; } </style> <div class="left"> float the left element </div> <div class="none">Copy the code

If you want to avoid overwriting the element, you can invoke the BFC feature of the second element and add overflow: hidden to the second element.

<style> .left { height: 100px; width: 100px; float: left; background: green; } .none { width: 200px; height: 200px; background: grey; overflow: hidden; } </style> <div class="left"> float the left element </div> <div class="none">Copy the code

This method also works well for a two-column adaptive layout, where the width on the left is fixed and the width on the right is adaptive (remove the width on the right above).




The last

I’m Smoothzjc, dedicated to producing more good articles than just the front end

Writing is not easy, thanks for your support โค

Phase to recommend

React Hook: How to Learn React Hook in 2022

A rare Webpack study Guide (10,000 words to get you started with Webpack and master common advanced configuration)

Github + Hexo Implement your own personal blog, Configuration theme (super detailed)

10 minutes to thoroughly Understand how to configure subdomains to deploy multiple projects

This article explains how to configure pseudo static to solve the 404 problem of deployment project refresh page

Learn common horizontal and vertical Centered interview questions in 3 minutes

React: Emoji input with Antd+EMOJIALL

ใ€ Suggested collection ใ€‘ a summary of git common instructions!! Suitable for small white and want to understand the basic instructions of Git at work.

A brief introduction to javascript prototypes and prototype chains