The introduction

I was ashamed when the interviewer asked me about BFC. As a front-end developer with three years of development experience, I could only shake my head at a loss. I probably wouldn’t have taken the initiative to learn about this if I wasn’t preparing for an interview – no, it’s true that I don’t write enough on the job. CSS is my weak point, and today I will attack them one by one.

I. Defined BFC

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of Block boxes takes place and where floating elements interact with other elements.

Do not understand the first check MDN, but purely look at the definition of personal temporarily do not feel. In order to better understand BFC, this article decided to start with a real development scenario and move closer to the definition and features of BFC.

2. Find the BFC based on actual application scenarios

One of the most common problems: child element adds float, parent element height collapses.

One solution is to clear the float for the parent element

overflow: auto/hidden/scroll; /** Create a BFC **/
Copy the code

Similar problem: two adjacent boxes, left box set left float, the width of the right box covers the width of the left box. You can also use the above method to clear the float to the right of the box to achieve a state of isolation from each other. Off-topic: The interviewer asked how to achieve a two/three column layout. In addition to the Flex layout, it is likely that the BFC will also be examined.

Problem 3: Margin values are set for two adjacent boxes, but the margins are merged.

// before
<div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
// after
<div>
    <div class="box3"></div>
    <div class="box5"> <! Create a BFC-->
        <div class="box4"></div>
    </div>
</div>
Copy the code
.box3..box4 {
    width: 120px;
    height: 120px;
    background: lightblue;
}
.box3 {
    margin: 10px 0;
}
.box4 {
    margin: 30px 0;
}
.box5 {
    overflow: auto/hidden/scroll
}
Copy the code

The above three scenarios, to be honest, are not unfamiliar. But solving a problem doesn’t stop with knowing how to do it. It starts with knowing why you do it. I think the interviewer probably wants to know that the candidate knows that he or she is using the PRINCIPLES of the BFC to solve the above problems. At this time to look at the definition and characteristics of BFC, anyway, I have a sense of enlightenment.

Iii. Characteristics of BFC

  1. When calculating the height of the BFC, floating elements are also involved
  2. The region of the BFC does not overlap with the floating element region
  3. Margins of two adjacent boxes belonging to the same BFC will overlap
  4. A BFC is a separate container within a page, and elements in the container do not affect elements outside the container
  5. The boxes in the BFC are vertically distributed

How to trigger BFC

  • The root element (< HTML >)
  • Float element (element’sfloatnotnone)
  • Absolutely locate the element (element’sposition 为 absolute 或 fixed)
  • Inline block elements (of elementsdisplay 为 inline-block)
  • overflowComputed values (Computed) are notvisibleThe block element
  • displayA value offlow-rootThe elements of the
  • containA value oflayout,content Or paint elements
  • Elastic element (display 为 flex 或 inline-flex The immediate child of the element)
  • Grid elements (display 为 grid 或 inline-gridThe immediate child of the element)

The above are some of the more common CSS Settings copied from MDN, Marc Yibo.

thinking

At present, the use of BFC seems to be used to solve some behaviors that do not meet our expectations — CSS floating effects, margin merging problems, etc. We do not have a deeper understanding and practice at present, maybe we will update later.