Speaking of BFC, we must first understand the positioning mechanism in CSS document flow, and this part is simple and simple, but there is a pit may mislead us, especially in this article to explain.

1. Location mechanism in document flow

1. There are three basic ways

CSS has three basic positioning mechanisms that I think most of you already know, so I’ll give you a quick overview (without wasting time) :

  1. Common flow: the default positioning mode of the CSS. The triggering modes can be position: static/relative and float: None
  2. Float: A float is separated from a normal stream and can be moved left and right until its outer border touches an edge containing a box or another float. This is triggered basically as float:left/top, etc.
  3. Absolute positioning: The box is detached from the normal stream and does not affect the layout of other elements on the normal stream

2. Precautions

So, at this point, most beginners will have a three-dimensional sense of the three flows combined with the real world, as shown in the picture below:

I would like to point out that the above expression is not completely correct, although the hierarchy is clear, but it gives beginners the wrong impression: since the floating element is already floating, and there is no room for it in normal flow divs, the floating element should have no effect on normal elements at all. Of course not! Let’s go straight to the last small example (the extra coloring code is removed) :

<body>
  <div class='parent'>
    <div class='child1'>
       Child1
    </div>
	<div class='child2'</div> </div> </body> <style>. Parent {width:400px; min-height:100px; } .child1 { width:50px; height:50px; } .child2 { width:100px; height:100px; } </style>Copy the code

The effect is as follows:

Add float:left to child1. Float :left: float:left: float:left

Yi! Child1 does feel floating, and Child2 does not hesitate to replace child1 in its original position. Why did you avoid child1 like an old lady falling down? This is what I want to remind my friends to pay attention to. Here’s the explanation:

Float was originally designed to look like a newspaper text wrapped around an image, as in our example of normal stream text wrapped around Child1. But then it turned out that you could combine float + div with a certain layout, so it’s a float feature. That is, float is just out of the document flow, that is, it will not be laid out as you want it to be, even if it is in any position that is horizontal with the rest of the document flow, when we use float, we basically consider its layout positioning, do not think it completely floating, its impact is still there.

Ok, this pit is solved for those who don’t know, now it’s easy to understand BFC.

Ii. BFC exploration road

You probably don’t know what the BFC is, but the classic way to solve the problem is to set overflow:hidden for the parent div, but if the interviewer asks you why, you’ll probably stop. Don’t ask me how I know, I used to be that guy… So, knowing BFC, you can see why.

1. The concept of landing

BFC (Block Formatting Context) is part of the visual CSS rendering of Web pages. It has its own set of rendering rules, which determine how its sub-elements are positioned and how they interact with other elements.

2. Landing characteristics

Elements with BFC characteristics can be considered as separate containers, the elements inside the container do not affect the layout of the elements outside, and BFC has some characteristics that normal containers do not have. Many good articles are listed as follows:

  1. The inner boxes will be placed vertically, one after the other, starting from the top;
  2. The vertical distance of box is determined by margin. The vertical margin of two adjacent boxes belonging to the same BFC will be superimposed.
  3. In BFC, the margin-left edge of each box touches the border-left edge of the container. For right-to-left formats, the right edge is touched, even if it is floating, i.e., margin penetration does not occur;
  4. The area that forms the BFC does not overlap the float box;
  5. When calculating the height of the BFC, the child float element is also involved (the BFC contains exactly the child element of the float, that is, the closed float);

[Add 2019/04/10] For the content of 2, some friends proposed that in a normal layout flow, the vertical direction of two adjacent box elements of the same parent box (whether BFC or not) will still overlap. Yes, but if the parent box is a BFC, it has the following characteristics: (1) In ordinary flow, if the immediate child box of the parent box sets a vertical margin, it will not enlarge the parent element, and the effect is as follows:

(2) For the above problem, if the parent box is set to BFC (give a overflow:hidden), the effect is as follows:

So, here are some questions to answer:

  1. How to ensure that a div element is not overwritten by floating elements of the same class: Set the div element to BFC;
  2. Why does the parent div set Overflow: Hidden allow it to spread even if its child div is floating: Because the parent div is a BFC.

But! Here I want to say some of my ideas, namely: I think, is put forward the concept of landing the independence to the main purpose is to segregate the container, the container itself with other elements is entirely meet the above features, this should be treated differently, we should use a landing the core thought in the inside instead of outside itself, the article will be example.

3. Conditions for triggering the BFC

Have a friend listed a lot of, remember some conventional can:

  1. The root element or the element containing the root element, in this case the body element;
  2. Float elements (float is not None);
  3. (Position: Absolute /fixed);
  4. Inline block elements (display:inline-block);
  5. Table cells (display:table-cell, default value for HTML table cells);
  6. Display :table-caption, default HTML table title
  7. Display :table/table-row/table-row-group/table-header-group/table-footer-group/inline-table, Default attributes for HTML table, row, tBody, thead, and tfoot, respectively);
  8. Overflow: non-visible block elements;
  9. display:flow-root;
  10. contain:layout / content / strict;
  11. Elastic elements (direct children of the display:flex/inline-flex element);
  12. Grid element (direct child of display:grid/inline-grid element);
  13. Multi-column containers (column-count or column-width is not auto, and column-count is 1);
  14. Column-span elements for all always create a new BFC, even if the element is not reported in a multi-column container;

So, every time you see overflow:hidden, float:left/right, position:absolute/fixed, you must be BFC

4. Actual application scenarios

BFC basically does two things in a real development layout:

  1. Avoid parent element collapse due to child element float;
  2. Avoid vertical margin overlap of two block-level elements in the same BFC (set one of them as a new BFC, permanently isolate external influences);
  3. Adaptive two-column layout.

5. Landing the instance

Just look at it

<body>
    <div class='box'>
	   <div class='left'> left </div> <div class='right'> right <div class='little'>1</div>
		 <div class='little'>2</div>
		 <div class='little'>3</div>
	   </div>
	</div>
</body>
<style>
.box {
  background:# 888;
  overflow:hidden;
  margin-left:50px;
}
.left {
  background: #73DE80; / * * / green
  width:200px;
  height:200px;
}
.right {
  background: #EF5BE2; / * * / pink
  width:400px;
  min-height:100px;
}
.little {
    background: #fff;
	width: 50px;
	height: 50px;
	margin: 10px;
	float:left;
}
</style>
Copy the code

The effect is as follows:

If you suddenly add a float:left: to the div left element

There you go! The child element of the div right element is empty, so turn the div right into a BFC, for example, using: overflow:hidden, which looks like this:

In this way, the BFC internal elements are protected from external interference and do not overlap with float elements.

However, if I set the absolute positioning of the box Right element, it will override the box Left floating element, which does not comply with the BFC feature that does not overlap with float elements:

So I came up with the idea that my colleagues and I had discussed, that we couldn’t make a definitive claim to the BFC features listed above, because there were two big layers of knowledge involved. When absolute positioning is set, the BFC is triggered, but it directly affects the hierarchy, so the latter is preferred.

The above is I want to remind the general and I like the primary friend, welcome everyone criticism correction, thank you!! ~ ~ ~

reference
  1. Learning BFC juejin.cn/post/684490…
  2. Cc /2018/08/12/…