preface

When I first started CSS, I often heard the word “document flow”. What exactly is “document flow”? Absolute positioning and Float can be removed from the flow of documents. The W3C standard documents Absolute positioning and Float can be removed from the flow of documents. I couldn’t find Document Flow anywhere. It turns out that some god translated Normal flow into document flow… I prefer the literal translation of it as “regular flow”, or simply quoting the English noun.

What does Normal flow mean?

Normal flow Normal flow Normal flow Normal flow

You all know the position and location system CSS attributes: static | relative | absolute | fixed and float: none | left | right, including the position of the default value is static, and float to the default value is none. And the position: the static | relative all belong to Normal flow. In addition, the effect of setting position: Absolute is the same as Normal Flow (CSS Magic: Absolute Positioning is also based on Normal Flow). Therefore, I think the term “deviating from Normal flow” is not completely correct and even misleading. After preliminary understanding of the status of Normal flow and its relationship with other positioning modes, we must be eager to explore its characteristics and behavior characteristics! This brings us back to the familiar IFC and BFC. For details, see CSS Magic Hall: Reintroducing Box Model, IFC, BFC, and Collapsing Margins

Normal Flow, the backer of IFC and BFC

There have been a lot of information about IFC and BFC, and we have invested a lot of energy to understand them, but we tend to ignore the premise that there is no IFC and BFC without Normal flow. When we use absolute or floating positioning, there is no need to talk about IFC and BFC. What about absolute positioning and floating positioning causing elements to generate new BFC’s? This is how I understand it. First, absolute positioning and floating positioning must produce new BFC, just as the root element produces the default BFC, for use by block-level descendant boxes that use the regular flow. However, as with bFC-induced hyperfines, the boxes themselves are no longer affected by the original BFC, so there is no more Collapsing. I have a question: why can a document have multiple BFC’s but only one IFC?

The meaning of box positioning under BFC

I think you’ve all tried to achieve horizontal center in this way (it doesn’t work with IE5.5)


  .center{
    font-size: 30px;
    line-height: 2;
    text-align: center;
    background: #06f;
    
    width: 200px;
    margin: 0 auto;
  }


  
       

        hello world:)
       

Copy the code



Participate in the BFC box exclusive line, I think we should have no objection, but specifically how to exclusive law? Look at the equation!

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'  = width of containing blockCopy the code

Margin-left /width/margin-right can be auto and has the following rules:

  1. If width is auto, the actual value of the other attributes set to auto is 0, and the actual value of width satisfies the equation;
  2. If width is numeric, margin-left/right are all auto, and the sum of other attribute values except marin-left/right is less than the width of containing block, Margin-left == margin-right == (‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border – right – width) / 2; Otherwise margin-left == margin-right == 0.

Normal Flow’s younger brother — Relative Positioning

We can use Normal flow or Float positioning mode as the base and then superimpose a relative positioning, so as to achieve more flexible positioning operation. The top/right/bottom/ lefT4 attributes are the most powerful weapons for relative positioning. Obviously, they default to auto. The four edges of the margin box in Normal flow or Float positioning mode are used as the reference frame. Then just master the following rules and you can use them freely:

  1. If both left and right are auto, the actual value is 0.
  2. Left == -right; left == -right;
  3. If both left and right are numeric values, the values are based on the direction. If direction is LTR, the left value is retained, while right = -left; If direction is RTL, the value of right is retained, while left = -right. (top/bottom rule as above)

Note:

  1. Stacking relative positioning of the box will not affect the typesetting of other boxes, only the effect of overlap will occur;

  2. If after the relative positioning of box containing beyond belong to the scope of the block and overflow: auto | scroll; This will result in scroll bars, which will affect the layout of other boxes.

    
         
    

          
    
           A
          
    

         
    Copy the code

conclusion

If any mistake, please correct me respect the original, reproduced please indicate from: www.cnblogs.com/fsjohnhuang…

Thank you

Relative Positioning Visual Formatting Model details KB010: Normal flow KB009: The CSS positioning system overview www.css88.com/book/css/pr…