Adaptive Layout of BFC width, Adaptive Layout of bfc width

Adaptive Layout of BFC width, Adaptive Layout of bfc width

Speaking of Adaptive Layout, we have learned in the article "Adaptive Layout of the width of the discussion. At that time, the core idea was to use float + margin. Based on the fluid characteristics of block elements, the width of float elements is calculated and assigned to the corresponding margin of block elements. But there is a drawback in doing so, that every time we have to know the width of the float element, and then assign it to the margin of the block element.

However, we learned from the "Analysis of BFC" that the BFC region does not overlap with External Floating elements. This feature enables Adaptive Layout of two columns. Let's review it.

<! DOCTYPE html> 
Run the Code as follows:

We can see that the floating element (green square) overlaps with the div. noramDiv element, and I didn't add margin.
You can also run the above Code to scale the page width and find that it is also an adaptive drop.
(PS: The above example of BFC implementing two-column self-adaptation can be compared with the "float instance description", and the effect will be even better .)
We used overflow: hidden; above to trigger the BFC of div. normalDiv. In the "Analysis of BFC", we learned the following methods to trigger elements into BFC:
1. the float attribute is not none.
2. position is absolute or fixed
3. The value of overflow is not visible.
4. The value of display is table-cell, table-caption, or any of the inline-blocks.
Aside from the third point, the value of overflow is not visible. How many other methods are suitable for adaptive BFC layout?
Of course not.
First, for the first point of float, because the float trigger element BFC, its own float has another characteristic, such as encapsulating the element, undermining the fluid nature of block-level elements, therefore, it cannot be used for Adaptive Layout.
For the second position, the position cannot be used for Adaptive Layout because it separates elements from the document stream seriously.
Specifically, when you set display: table-cell in the fourth point, it will not exceed the container width when you set a larger value than the width.
Too many errors! Isn't that perfect. So we can set its width to a very large value, so it can be used for Adaptive Layout.
Take a look at the following code
<! DOCTYPE html> 

After running the code, see.
Ps: I have a better experience after running it myself. Then I can scale the browser. Hahaha, I will know it after I try it.
For the display: table-caption in the fourth point, filter it directly!
For the display: inline-block at four o'clock, because it is as wrapped as float, It is filtered out. However, we mentioned in "clear float of BFC" That IE6 and 7 have hasLayout, which has fluid characteristics in IE6 and 7. Therefore, it can solve the Adaptive Layout of IE6 and 7. The Code is as follows:
.floatElm {    float: left;}.bftContent {    display: inline-block;}
So, the method for triggering BFC can be used in Adaptive Layout as follows:

 

 
  
 
   
 
    
Overflow (hidden/auto)
 
    
Disadvantages:
1. overflow: hidden with cropping function when there are too many contents
2. overflow: when there is too much auto content, a scroll bar will appear.
 
   
 
   
 
    
Display: inline-block
 
    
Disadvantages:
Only applicable to IE6 and 7
 
   
 
   
 
    
Display: table-cell
 
    
Disadvantages:
Only applicable to IE8 + and other browsers
 
   
 
  

 
As described above, we can obtain the following general methods to achieve adaptive layout using BFC:
. FloatElm {float: left ;}. bfcContent {display: table-cell; width: 9000px;/* width up to screen width * // * hack means, for IE6, 7 */* display: inline-block; * width: auto ;}
Now, we can use this method to implement three-column layout. The Code is as follows:
<! -- The width of the left and right is PX, and the middle is adaptive --> <! DOCTYPE html>  

Don't believe it. Run the code on your own and pull the browser.