Advanced discussion about CSS by the position attribute (including block, BFC, margin collapse)

The reason for writing this article stems from this article: the discussion about position in the interview and the interview, the words from the beginning:

In the interview, ask a CSS position property can brush off half of the people this is what the situation ...

In fact, I was going to go along all the way to normal flow, containing block, BFC, margin collapse,base line,writing Mode,bidi, But the first question (pro I really only asked position what value and behavior AH) on the tragedy ...

　　

When it comes to position, a little bit about CSS is bound to say its four property values immediately: static, relative, absolute, fixed. But a deeper discussion involves the normal flow,containing block,BFC,margin collapseAs mentioned above,base line,writing mode,bidi, and how many people can answer the complete well, so I want to do a summary of their own.

1.normal Flow　

Normal flow: Normal flow is the default positioning method. Any element that does not specifically specify {Position:absolute} or {position:fixed} attributes, and elements that are not floated, will get this property by default.

In this way, block-level elements extend vertically in their containing blocks, and the inline elements are arranged horizontally from left to right in their containing blocks.

It is worth noting that the vertical margin (vertical margin) is overlapping in the normal flow. That is, the margins between the top and bottom two block-level boxes are determined by the elements with the larger margins, not their and!

1 <style> 2 Div 3 {4     width:100px; 5     height:100px; 6     border:1px solid #00A4CC; 7     Background-color : #3e8f3e; 8} 9. div110 {     margin:20px 0;12}13. div214 {margin:40px 0;16}17 </style>18 
The effect appears as follows:
　　
The vertical distance of the DIV1 and Div2 is determined by the large margin, which is the 40px of the div2, not the sum of the 60px.
Second, the inline element is broken, and when the width is limited, it is automatically moved to the next line. This can produce some unsightly effects if the inline block has a border. Look at the following effect:
1 
The effect appears as follows:
　　
2.containing Block
Containing block (contains blocks): is an important concept of the visual format model, which is similar to the box model, and can be understood as a rectangle, and the function of this rectangle is to provide a reference to the elements contained in it, the size and position of the element is often determined by the containing block where the element resides. In other words, the position and size of an element box is sometimes calculated by relative to a particular rectangle, which is called the containing block of the element.
The containing block of an element is defined in the following way:

 
  

  
   
 
    
A user agent (such as a browser) chooses the root element as the containing block (known as the initial containing block). 
 
    
For other elements, the containing block consists of the content boundary of the nearest block-level ancestor element box, unless the element uses an absolute position.
 
    
If the element has the attribute ' position:fixed ', the containing block is established by the viewport. 
 
    
If the element has the attribute ' Position:absolute ', containing block is established by the nearest position not the static ancestor, as follows:
 
     
 
      
If the ancestor is a block-level element, the containing block is formed by the padding edge of the ancestor . 
 
      
If the ancestor is an inline element, the containing block depends on the ancestor's direction attribute.
 
       
 
        
If the direction is ltr (left to right), the upper and left content boundaries of the first box generated by the ancestor are above and to containing block, and the bottom and right content boundaries of the last box of the ancestors are below and to the bottom of the containing block.
 
        
If the direction is RTL (right to left), the upper and right content boundaries of the first box generated by the ancestor are above and to the left of the containing block, and the lower and lower content boundaries of the last box of the ancestors are below and to the ieft of the containing block.
 
       
 
     
 
   
 
  
5. If there is no ancestor, the content boundary of the root element box is determined to be containing block.

 
  

  
   
 
    
Noun Explanation:
 
    
Viewports: By parsing a document, continuous media (such as a screen is continuous media, while a printer is a page-based media) gives the user a viewport (a window or other area displayed on the screen).
 
    
Root element: In the source file, each element has a parent element, with only one exception, which is the root element.
 
    
Padding Edge: See:
 
    
 
   
 
  
Give me a chestnut:
1 
Then, without specifying any position, the containng block of the above code is determined as follows:
If we set Div1 's position as:
1 #div1 {Position:absolute;}
At this point, Div1 's containing block is no longer body, it becomes the initial containing block (because there is no ancestor box with position).
3.BFC
BFC (block formatting context block formatting contexts): a concept in the CSS 2.1 specification that was modified to flow root in CSS3. Formatting indicates that in this context, elements should be initialized in this context, i.e. how elements should be laid out in this context. element if a BF is created BFC determines how its content is positioned, and how it relates to other elements and interacts with it.
Popular understanding: First of all, BFC is a noun, is an independent layout environment, we can be understood as a box (actually can't see the touch), the contents of the box is not affected by the outside world. The idea of converting to BFC is that the layout of elements in BFC is unaffected by the outside world (we tend to use this feature to eliminate the effects of floating elements on their non-floating sibling elements and their child elements.) And in a BFC, the Block box and the row box (the row box consists of all inline elements in a row) are arranged vertically along the border of its parent element.
　　
　　Elements that are created with BFC are arranged in the following way for their child elements:

 
   

  
    
 
     
In BFC, the boxes are arranged vertically from the top, one by one, and the vertical gap between the two boxes is determined by their margin value. In a BFC, the vertical margins of two adjacent block-level boxes are collapsed. That is, the vertical margins of the block-level elements that are adjacent to the BFC are collapsed (collapse).
 
     
In BFC, the left outer edge (margin-left) of each box touches the left edge (border-left) of the container (it touches the right edge for a right-to-left format), even if there is a float (although the content area of a child element is compressed by a float), Unless this child element also creates a new BFC, as it itself is also a float.
 
    
 
   

 
   

  
    
 
     
Noun Explanation:
 
     
Margin folding: In CSS, the margins of the adjacent two boxes (which may be sibling or ancestor relationships) can be combined into a single margin. This way of merging the margins is known as folding, and thus the outer margin that is combined is called the folded margin.
 
    
 
   
　　Result of Folding:　

 
   

  
    
 
     
When two adjacent margins are positive, the collapsed result is a larger value between them.
 
     
When two adjacent margins are negative, the collapsed result is a larger value of both absolute values.
 
     
Two outer margin a positive and negative, the result of folding is the sum of the two.
 
    
 
   
　　
Prerequisites for Folding:margin must be contiguous and need to meet the following conditions:

 
   

  
    
 
     
Must be a block-level box in regular document flow (non-float and absolute positioning) and be in the same BFC.
 
     
No wire box, no voids (clearance), no padding and border separating them
 
     
are vertically adjacent margins, which can be any of the following 
      
 
       
The margin-top of the element and the margin-top of the child element of its first regular document flow
 
      
 
      
 
       
The margin-bottom of the element and the margin-top of the sibling element of its next regular document stream
 
      
 
      
 
       
The margin-bottom of the element whose height is auto and the margin-bottom of the child of its last regular document stream
 
      
 
      
 
       
The height is 0 and the minimum height is also 0, the child elements of the regular document stream are not included, and the Margin-top and margin-bottom of the elements of the new BFC are not created by themselves
 
      
 
    
 
   
　　
　　So, under what circumstances will the BFC be created:　　

 
   

  
    
 
     
Floating Elements (Float:left | Right
 
     
Absolute positioning elements (Position:absolute | Fixed
 
     
Inline block Element (Display:inline-block)
 
     
Table cells (DISPLAY:TABLE-CELLS,TD, TH)
 
     
The title of the table (display:table-captions,caption)
 
     
The ' overflow ' attribute is not a visible element
 
     
"Anonymous box" created by Table element
 
    
 
   
It should be noted that "display:table" itself does not produce "block formatting contexts". However, it can produce an anonymous box that contains a "display:table-cell" box that produces a block formatting context.
In summary, for elements of "display:table", the block formatting context is generated by an anonymous box instead of "display:table".
Finally, these elements create a block formatting context, which is not itself a block formatting context. 
BFC use: Eliminate floating and multi-column layouts.
1. Adaptive two-column layout
1 <style> 2     body {3         position:relative; 4     } 5  6     . Aside {7         width:100px; 8         height:150p X 9         float:left;10         background: #f66,     }12,     main {         height:200px;15         background: #fcc;     }17 </style>18 <body>19     <div class= "aside" ></div>20 <div     class= "main" ></div>21 </body>
The effect is as follows:
　　
　　
According to the rules of BFC:

 
   

  
    
 
     
The left outer edge (margin-left) of each box touches the left edge of the container (Border-left) (for right-to-left formatting, it touches the right edge)
 
    
 
   
So, although there is a floating element aslide, the left side of main will still touch the left side of the containing block.
Therefore, we can according to:

 
   

  
    
 
     
The BFC area does not overlap with the float box.
 
    
 
   
To implement the adaptive two-column layout by triggering main to generate BFC.
1. Main {2     overflow:hidden;3}
This new BFC does not overlap with floating aside when the main generator BFC is triggered. As a result, the width of the containing block, and the width of the aside, automatically narrows. The effect is as follows:
　　
　　
2. Clear internal float
1 
The desired result is:
But the result is:
The parent container does not enclose the floating child elements, commonly known as collapsing, in order to eliminate this phenomenon, except with the traditional pseudo-class method. Under

 
    

  
     
 
      
When calculating the height of the BFC, floating elements are also involved in the calculation
 
     
 
    
You can also make the parent container form BFC to clear the float and simply modify the code:
<div class= "wrapper" style= "Float:left;" >  //Add a float property to form BFC    <div class= "main" >1</div>    <div class= "main" >2</div>    <div class= "main" >3</div></div>
You can get the following effect:
　　
In summary, BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.
Because the elements inside the BFC and the external elements absolutely do not affect each other, it should not affect the layout of the BFC inner box if there is a float outside the BFC, and the BFC will be narrowed rather than overlapping with the float. Similarly, when the BFC interior has a float, the height of the BFC is included when the height is calculated to not affect the layout of the external elements. Avoiding margin overlap is one of the reasons.
Advanced discussion about CSS by the position attribute (including block, BFC, margin collapse)