BFC layout principle

The original intention of writing this blog is actually when I saw this method when solving floats, I was thinking about what BFC is and why floats can be cleared. You don’t know the result by looking at it. The more you look at it, the less you understand it. So you should study it carefully and summarize your learning experience.

　1.What is BFC

BFC is the abbreviation of Box Formatting Context, literally translated as "block-level formatting context".

　　1.1　Box is the basic unit of CSS layout

Box is the object and basic unit of CSS layout. The type and display characteristics of the element determine the type of Box. Different types of boxes determine the different layout forms of the page

• block-level box: Elements with display attributes of block, list-item, and table will generate block-level boxes. And participate in block fomatting context;
• inline-level box: Elements with display attributes of inline, inline-block, and inline-table will generate inline-level boxes. And participate in inline formatting context;
• run-in box
If run-in box contains block box, then this run-in box also becomes block box

If the sibling node immediately following the run-in box is a block box, then this run-in box will be used as an inline box in this block box. The run-in box cannot enter a node that already starts with run-in box Within the block, you cannot enter itself

display:run-in;

within the block

Otherwise, the run-in box becomes a block box

　　1.2　Formatting Context

refers to a rendering area in the page and has a set of rendering rules, which determines how its sub-elements are positioned, as well as their interaction and interaction with other elements.

The most common Formatting contexts are Block fomatting context (BFC for short) and Inline formatting context (IFC for short).

　 1.3　BFC

Block-level formatting context, it refers to an independent block-level rendering area, only Block-level BOX participates. This area has a set of rendering rules to constrain the layout of block-level boxes, and has nothing to do with the outside of the area.

　 2.Generation of BFC

• Root element
• The value of float is not none
• The value of overflow is not visible
• The values ​​of display are inline-block, table-cell, table-caption
The value of
• position is absolute or fixed

　3.BFC layout rules

1. The internal Boxes will be placed one after another in the vertical direction.
2. The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap
3. The left side of the margin box of each element touches the left side of the containing block border box (for left-to-right formatting, otherwise the opposite is true). This is true even if there is float.
4. The BFC area will not overlap with the float box.
5. BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the elements outside. And vice versa.
6. When calculating the height of BFC, floating elements also participate in the calculation

　4. Some applications of BFC

　　Prevent vertical margin overlap

In the above rule 2, the margins of two adjacent boxes belonging to the same BFC will overlap. The code and effect are as follows:

<span style="color: #0000ff"><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
    div</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        margin</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 10px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background:lightgreen;"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background:lightblue;"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background:pink;"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span></span></span></span>

 

 

 可明显看出三个div之间的magin是都是10，互相发生了重叠。那怎么避免呢，规则2说了，是处于同一个BFC的相邻box元素会发生margin重叠，那我们让他们不处于一个BFC不就行了呀，所以给div元素外加了个p标签：

 　　　　自适应两栏布局

 上述规则3中，每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000"> 
    body </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 300px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        position</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> relative</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000"> 
  
    .aside </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 150px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        float</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> left</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #f66</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000"> 
  
    .main </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000"> 
        background</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> #fcc</span><span style="background-color: #f5f5f5; color: #000000">;</span> 
    <span style="background-color: #f5f5f5; color: #000000">}</span> 
<span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span> 
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="aside"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span> 
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="main"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span> </span></span></span></span>

View Code

 

 

 因为上述两个元素都同处body，所以他们的左边与body相接触。

再根据规则4，BFC区域不会与float区域重叠，我们可以给main触发BFC化实现两列布局，比如给main添加overflow：hidden 效果如下：

　　　　清除浮动

 根据规则6，计算BFC的高度时，浮动元素也参与计算，因此可以根据这个规则清除浮动，如下：

<span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000"> 
    .mydiv</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
        border</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">3px dashed #ddd</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
        overflow</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> hidden</span><span style="background-color: #f5f5f5; color: #000000">;</span>
    <span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span> 
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="mydiv"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="float:left"</span><span style="color: #0000ff">></span>我设置了float属性<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span> </span></span></span></span>

 

 

 这也承接了上节float清除浮动的BFC方式的原理，实际上使元素BFC化即可，可参照BFC的生成规则。

　　5.总结

 对于BFC，我认为我们主要是想通过掌握BFC的规则来实现一些布局效果，并且利用BFC规则达到我们的各种目的，比如清除浮动，清除margin重叠等。

上述几个例子同时也说明了规则5，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之同理。

BFC内部的元素和外部元素不会相互影响，所以这就会使BFC计算高度时会包含浮动的高度，同样也避免了margin叠加。