CSS BFC, IFC, GFC, and FFC

Objective
Box model as the basis of the base of the CSS, once thought mastered the Internet Explorer and the standard block-level box model can be, but recently in the Learning Row-level box model was originally so naïve and ridiculous. This paper attempts to comprehensively describe the characteristics of block-level, row-level box models. As a record of recent studies.

What is a box model?
How the box model is sacred can be used as the basis of CSS. Well-known than to meet, on the map to feed!

Let's take another slice of it!

Below we are chestnut with <div></div>. The <div></div> tag is parsed by the browser and generates a DIV element that is added to the document tree, but the CSS object is not the document tree, but the render that is generated by the document tree Tree, and the box model is the node of the render tree.
Note
* 1. The CSS acts on the box, not the elements (element);
* 2. JS cannot operate the box directly.

Structure of the box model
Because block-level boxes interfere with less information when validating effects, it is easy to understand the box model, so the following will be explained in block-level box models.
Note: The row-level box model is consistent with the block-level box model structure, except that the row-level box has its own characteristics on that basis.
From the above two pictures, the box model is actually composed of the following 4 boxes:
1. Content box: required, composed of content area and 4 content/inner edge;
2. Padding box: optional, consisting of padding and 4 padding edge. If the padding width is set to 0, the padding edge overlaps with the content edage;
3. Border box: Optional, consisting of border and 4 border edge. If the border width is set to 0, the border edge overlaps with the padding edage;
4. Margin box: Optional, consisting of margin and 4 margin/outer edge. If the margin width is set to 0, the margin edge overlaps with the border edage.
For those who have just touched the CSS, the "width/height of the div element set through the Width/height property" is often hung in the mouth, which is actually wrong.
1. First CSS properties width and Height Act on the box created by the DIV element, not the element itself;
2. The box model is made up of 4 boxes, which is the width and height of which boxes are in effect.
This is divided into the IE box model and the standard box model.
IE Box Model
IE5.5 (weird mode) uses the IE box model, others will use the standard box model.

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

Standard box model

width = content-width
height = content-height

Channel--box-sizing properties that roam between the IE box model and the standard box model
We see that there are two ways of dividing the width/height, which is the right way. In fact, both are right, specifically to see how to use it. In addition IE8 started to support the CSS3 attribute box-sizing, which gives us the freedom to choose which box to use:)
Box-sizing:content-box/border-box/inherit
content-box--default value, using standard box model
border-box--Using IE Box model
inherit--inheriting parent Element property values
Sample

element{
  -moz-box-sizing:border-box;//firefox3.5+
  -o-box-sizing:border-box;//Opera9.6 (Presto kernel)
  - Webkit-box-sizing:border-box; safari3.2+
  -ms-box-sizing:border-box;//IE8
  Box-sizing:border-box;//ie9+,chrome10.0+,safari5.1+, Opera10.6
}

Row-Level box-the beginning of the life of Doubt de:)
Before I understood the box model as above, when I saw the various phenomena of the row-level box, I began to doubt the life: (
Width/height does not work ...

. defined-wh{
  width:100px;
  height:50px;

  Border:solid 1px red;
  Background:yellow;
}

For Block-level Box

<div class= "DEFINED-WH" ></div>

For Inline-level Box

<span class= "DEFINED-WH" ></span>

How can the width of the row-level box be 0? Height is some but not 50px ah, what the hell is going on.
The reason is simple: the High/wide content box of the row-level box is not set by Height/width.
The high content Box/area is determined by font-size;
The width of the content Box/area is equal to the sum of the outer width (margin+border+padding+content width) of its child row-level box.

The row-level box was squeezed ...

. broken{
  border:solid 1px red;
  Background:yellow;
}

For Block-level Box

<div class= "Broken" > A paragraph of text a paragraph of text a paragraph of text a paragraph of text </div>

For Inline-level Box

<span class= "Broken" > A paragraph of text a paragraph of text a paragraph of text a paragraph of text </span>

The row-level box was quartered and pathetic. What's more pathetic is that I can't understand ...
In fact, the recommendation has a description of the OH.
>the box model for inline elements in bidirectional context
>when the element ' s ' direction ' is ' ltr ', the left-most generated box of the first line box in which the Eleme NT appears have the left margin, left border and left padding, and the right-most generated box of the last line box in WHI Ch The element appears have the right padding, right border and right margin.
>when the element ' s ' direction ' is ' RTL ', the right-most generated box of the first line box in which the Elem Ent appears have the right padding, right border and right margin, and the left-most generated box of the last line box in Which the element appears has a left margin, a left border and a left padding.
This means that when the Inline-level box is wider than the parent container width, it is split into multiple inline-level box,
When the property is direction to ltr, Margin/border/padding-left will act on the first inline-level box,margin/border/ The padding-right will be used for the last inline-level box; If the property direction is RTL, Margin/border/padding-right will act on the first inline-level box, The margin/border/padding-left will be used for the last inline-level box.
See, No. Row-level boxes are really going to be split, so cruel: |

Why doesn't the row-level box occupy space? How to brush the sense of existence ah ...

. existed{
  margin:20px;
  padding:20px;
  Border:solid 1px red;
  Background:yellow;
  Background-clip:content-box;
}

For Block-level Box

<div>before bababababababa</div>
<div class= "existed" >babababababababababa</div>
<div>after bababababababa</div>

For Inline-level Box

<div>before bababababababa</div>
<span class= "existed" >babababababababababa</span>
<div>after bababababababa</div>

Look, the margin/border/padding-top/bottom of the row-level boxes do not occupy space. Does the row-level box only occupy space with content box?
This has already involved the horizontal and vertical layout of the category, only the box model has been unable to interpret the above problems.
(To combine https://www.w3.org/TR/CSS2/box.html and https://www.w3.org/TR/CSS21/visuren.html, https://www.w3.org/TR/CSS21/ Visudet.html to understand. )

Before we dive into the above-mentioned behavior of Inline-level box, we need to add:
1. An element will correspond to a 0~n box; (When setting ' Display:none; ')
2. According to the ' Display ' property value , the elements correspond to different types of controlling box (inline/block-level box is a subclass of controlling box). For CSS2 ' display:inline|inline-block|inline-table|table-cell|table-column-group ' elements correspond to Inline-level box, and ' Display: block|list-item|table|table-caption|table-header-group|table-row|table-row-group|table-footer-