css normal flow and arranged floating flow ordering

1. Conventional flow

> General flow layout

（1） 常规流 文档流 普通文档流 常规文档流。所有元素，默认情况下，都属于常规流布局

（2）总体规则：块盒独占一行，行盒水平依次排列

> Block comprising (containing)

Each block contains its own box, comprising a block decision box arrangement region (reference coordinate system).
Most cases, the box comprising a block, the contents of the cartridge to its parent element
Wherein the cassette block

The total width of each block of the cartridge, must be exactly equal to the width of containing block
The default value width is auto, auto: absorb the remaining space (to remove border, padding, margin)

When margins default value 0, set to auto, the remaining space will be absorbed (Width of the ability to absorb margin)

 (1)  若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收

 (2)  在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto(左右各吸收一半)

 (3)  在常规流中，块盒在其包含块中时，将width设置为auto，左右margin设置为负数，width会随之变宽，吸收剩余内容，达到块盒的总宽度，刚好等于包含块的宽度的代数和

 (4) 每个块盒垂直方向上的auto值:

              height：auto(默认值)，被内容撑开
              
              margin：auto(默认值)，表示0

The percentage value

padding, width, margin value may be a percentage (all percentages are corresponding to the width of the containing block, with the height does not matter)

    高度的百分比：

        （1） 包含块的高度取决于子元素的高度(父元素没设置宽高)，这种情况设置宽高无效

        （2） 包含块的高度不取决于子元素的高度(父元素设置宽高)，百分比相对于包含块的高度

The combined distance of up and down outside

Conventional two blocks flow cassette, vertically adjacent margins will be performed (maximum of two margins) were combined

   (1)  如父元素设置了外边距，上下外边距的合并，子元素会和父元素上端重合，这也是前面的          
        before添加一个元素的content:"";的原因，使脱离重合(或者父元素设置padding)

supplement

   当内容盒的宽高设定好，设置padding占取剩余空间（原本是margin-left占据剩余）

   当内容盒的宽高没有设定，宽度等于页面最大宽度，设置padding占取内容盒空间

2. Variable flow

Floating application

Text Wrapping
Laterally arranged

The basic characteristics of floating

float property value

   - left: 左浮动,元素靠上靠左排列
   - right: 右浮动,元素靠上靠右排列
   - none: 默认值, 常规流

     注： 1.当一个元素浮动,元素必定为块盒(更改display属性为block)
         2.浮动元素的包含块，和常规流一样，为父元素的内容盒

Box dimensions

  （1）宽度为auto时，适应内容宽度，如果没内容，则宽度为零  (如果是常规流，没有内容，
        会默认父级宽度,有内容也会用margin-leftz撑满整个包含块的宽度)

  （2）高度为auto时，与常规流一样，适应内容宽度

  （3）在常规流中，margin左右为auto时，会吸收父级元素剩余内容居中，如果内容占满了，margin就没有用了
          在浮动流中，margin为auto时，会自动设置为0

  （4）边框、内边距、百分比设置与常规流一样

Features box arrangement

  （1）左浮动的盒子靠上靠左排列
      右浮动的盒子靠上靠右排列

   （2）浮动盒子在包含块中排列时，会避开常规流块盒 

   （3）常规流块盒在包含块中排列时，不会避开浮动盒子 （看不见浮动元素的位置）

   （4）行盒在排列时，会避开浮动盒子

   （5）外边距合并不会发生(公用一个外边距)

Note: If the text is not a line box, the browser will automatically generate a line wrap text box, the box line is called the anonymous line boxes (similar span)

Box height collapsed

   （1）原因：高度坍塌的原因：父级常规流盒子的自动高度，不会考虑浮动盒子

   （2）解决办法：清除浮动盒子的浮动
 
           清除浮动，涉及css属性：clear
          
            - none： 默认值
            - left： 清除左浮动，该元素必须出现在前面元素的左浮动盒子的下方 (看一下天上左边浮动元素的位置)
            - right：清除右浮动，该元素必须出现在前面元素的右浮动盒子的下方 (看一下天上右边浮动元素的位置)
            - both： 清除两边浮动，该元素必须出现在前面元素的浮动盒子的下方 (清除上面元素的浮动，就可以出现盒子下方，撑开盒子）

           例:  .clear::after{
                       content: "";
                       display:block;  //默认行盒
                       clear:both;
                 }

Box placeholder

     （1）块元素独占一行

     （2）float(浮动)
            float:left; //可以使块元素从左到右依次排列，#可以同在一行,直到排不下
            flaot:right;//可以使块元素从右到左依次排列，#可以同在一行,直到排不下

      ### 补充
                    浮动盒子的顶边不得高于上一个盒子的顶边

                    若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左向右排列

Leadingme

Published 20 original articles · won praise 1 · views 59

Private letter concerns