Web page Layout Tutorial: The use of BFC and margin Collapse

Article Introduction: deep understanding of BFC and margin Collapse.

Understanding and application of BFC

First of all, let's look at the interpretation of BFC by the rules of the world's standard, in fact, we always suggest to look for the official definition in the study of this concept, because in principle, the official is the most authoritative and correct, but also more detailed, do not because you see English fear not before.

What is BFC (block formatting contexts)

BFC definition in the standard of the consortium:

Floating elements and absolutely positioned elements, block-level containers (such as Inline-blocks, Table-cells, and table-captions) that are not block-level boxes, and block-level boxes with overflow values that are not "visiable". will create new BFC (block-level format contexts) for their content.

In BFC, the boxes are arranged vertically one after another from the top, and the vertical clearance between the two boxes is determined by their margin values. In a BFC, the vertical outer margin of the two adjacent block-level boxes will result in folding.

In 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).

BFC's popular understanding:

First of all, BFC is a noun, is an independent layout environment, we can understand as a box (in fact, is not visible), the contents of the box inside the goods are not affected by the outside world. The understanding of conversion to BFC is that the layout of elements in BFC is unaffected by the outside world (we often use this feature to eliminate the effects of floating elements on their non floating sibling elements and their child elements.) And in a BFC, a block box and a row box (which consists of all inline elements in a row) are arranged vertically along the borders of its parent element.

The application of BFC

In the standard of the BFC, in addition to the definition above, the relative knowledge points are scattered, but the basic focus is on float, absolute positioning, margin collaspe. Let's take a look at how to apply the BFC to solve the problem.

In many websites, we often see this kind of, the left picture + right information of two column structure, below we see how to use BFC to achieve.

First we give a structure like this:

CSS. Box {width:210px;border:1px solid #000; Float:left}. img {width:100px;height:100px;background: #696; float:left ;} . info {background: #ccc; color: #fff;}//html 
  

			
   
 
    
 information, information, information, information, information and information--Information 
 
   
		
  
 
 
In general, it shows the kind of things we'd like to see:
 
 
 
 
But as the text information increases, it becomes very bad:
 
 
 
 
Obviously, this is because the text inside the info class is affected by the floating element, but that's not what we expect. At this point, we can create a BFC for the content of P elements to eliminate the effects of floating elements on the outside. As you know above, just add Overflow:hidden to the info element and create a new BFC for its contents. Of course, you can also use other methods to build. The effect is as follows:
 
 
 
 
Merging outer margin and BFC
In CSS, the outer margin of the adjacent two boxes (which may be sibling or ancestral) can be combined into a single outer margin. This method of merging the outer margins is called folding, and thus the outer margin that is combined is called the outer margin of the fold.

 
Collapsed results:
 
 
 

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

  
  
 
   
Must be a block-level box in regular document flow (not float and absolute positioning) and in the same BFC.
 
   
No wireframe, no voids (clearance, below), no padding and border separate them.
 
   
Are all in the vertical direction adjacent to the outer margin, can be any of the following 
    
 
     
The margin-top of the element's margin-top with the child elements of its first regular document stream
 
     
The margin-bottom of elements and the margin-top of sibling elements of their next regular document stream
 
     
The margin-bottom of the element with the height of auto and the child elements of its last regular document Stream Margin-bottom
 
     
A height of 0 and a minimum height of 0, which does not contain the child elements of the regular document stream, and does not own the Margin-top and margin-bottom of new BFC elements
 
    
 
  
 
 
 
 
The above conditions imply the following rules:
 
 
 

  
  
 
   
Creates a new BFC element (such as a floating element or an element with "overflow" value other than "visible") and the outer margin of its child elements does not collapse
 
   
A floating element does not produce a collapse (including its parent element and child elements) from the outer margin of any element.
 
   
An absolutely positioned element does not produce a collapse with the outer margin of any element
 
   
The Inline-block element does not produce a collapse with the outer margin of any element
 
   
The margin-bottom of a regular document flow element and the margin-top of sibling elements of its next regular document stream are folded unless there is a gap between them (clearance).
 
   
The margin-top of a regular document flow element is folded with the margin-top of the child element of its first regular document stream, if the parent element does not contain padding and border, and the child element does not contain clearance.
 
   
The margin-bottom of a regular document flow element with "height" to "auto" and "Min-height" to "0" will collapse the margin-bottom of its last regular document stream child element, provided that the parent element does not contain padding and Bo Rder, the margin-bottom of the child element is not folded with the margin-top containing the clearance.
 
   
A regular document flow element that does not contain border-top, Border-bottom, Padding-top, Padding-bottom, and its "height" is 0 or "auto", "Min-height" is "0", It also does not contain a row box (line box), and its own margin-top and Margin-bottom are folded.
 
  
 
 
 
 
(Below we analyze the case of not producing folding.) ）
 
 
Floating and absolute positioning does not produce margin folding with any elements
 
 
reason: floating elements and absolute positioning elements do not create margin folds with other boxes because the elements break out of the current document flow, violating the two margin described above are contiguous conditions, but also because Floating and absolute positioning causes the element to create a new BFC for its contents, so the BFC of the element and the child element is not the same, and therefore does not produce a margin collapse.
 
 
DEMO:
 
 
CSS body {padding:0;margin:0; Text-align:center}. wrapper {margin:30px;width:450px;border:1px solid red; Small-bo x {width:50px;height:50px;margin:10px;background: #9cc; middle-box {width:100px;height:100px;margin:20px; Background: #99c;}  . big-box {width:120px;height:120px;margin:20px;background: #33e;} floatl {float:left;}. floatr {float:right;}. Clear {Clear:both;} . posa {Position:absolute}. Overhid{overflow:hidden}. Red {background: #f00;}. Green {background: #0f0;} blue {Backgro und: #00f;} HTML 
   

			
    

     non-float
    
			
    
 
     
 float Left 
    
			
   
		
 
 
 
 
But the floating element is detached from the current BFC and does not affect the sibling elements behind it, and the elements in the back of the sibling and floating elements remain in the same BFC, so the margin between them is still folded. Here we make a change to the demo above:
 
 
    

			
     

      non-float
     
			
     

      float left
     
 
     

      non-clear 
     
			
    
		
 
 
 
 
From the above modified demo, it can be seen that the red block box in the absence of a clear float, its margin-top and the blue box of the Margin-bottom produced a folding, which proves my conclusion above.
 
 
Now let's talk about the magical thing about "clearance", when the element behind the floating element sets clear to close the floating in the relevant direction, according to the rules of the Margin-top, the closed-floating element produces a certain void above it (clearance, as shown below), The gap prevents the margin-top of the element from collapsing and exists as a spacing above the margin-top of the element. The calculation of this spacing is a little bit complicated, but you don't need to compute it in the actual work, let's take a look at the examples first:
 
 
     

			
      

       non-float
      
			
      

       float left 
      
			
      

       clear
      
			
     
		
 
 
 
 
We can see in the image above that the 40px margin-top we set for the red block (where we visualize it through the shadow of the same height) doesn't seem to work on the Purple Block box, and no matter how we modify the Margin-top value, it doesn't affect the position of the Red block box. But only by the Green block box of the Margin-bottom decided.
 
 
In other words, we just need to know that the border-top of the closed floating element will cling to the margin-bottom of the corresponding floating element.
 
 
It turns out that the value of the space generated by the closed floating block box on the margin-top (clearance) and the margin-top of the block box should be sufficient to allow the box to vertically cross the floating element Margin-bottom, through the official Rules of the world standard. The border-top of the closed floating block box happens to be adjacent to the margin-bottom of the floating element's block box.
 
 
Using the relevant values in the example above can be derived from this equation: r-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom
 
 
Ps! Closed float does not allow floating elements to return to the original BFC!
 
 
Analysis II: Inline-block elements and their sibling elements, child elements, and the outer margin of the parent element are not collapsed (including its parent element and child elements)
 
 
Inline-block does not conform to the requirements of the standard of the field that the element must be a block-level box, because the specification also shows that the display property of the block-level box must be one of the following three types: "Blocks", "List-item", and "table".
 
 
Resources
 
 
    

  
     
 
      
Http://www.w3.org/TR/CSS2/box.html
 
      
Http://www.w3.org/TR/CSS2/visuren.html#block-formatting
 
      
Http://www.w3.org/TR/CSS2/box.html#collapsing-margins
 
     
 
    
 
 
If you need to reprint, please observe the W3cplus Copyright statement, kindly indicate the source: http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html