css常规流排列和浮动流排序

1.常规流

>常规流布局

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

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

>包含块(containing)

• 每个盒子都有自己的包含块， 包含块决定了盒子的排列区域（参考坐标系）。
  绝大部分情况下，盒子的包含块，为其父元素的内容盒

• 块盒特征

1. 每个块盒的总宽度，必须刚好等于包含块的宽度

2. 宽度的默认值是auto，auto:将剩余空间吸收掉(除去border,padding,margin)

3. 外边距的默认值为0，设置为auto时，将剩余空间吸收掉 (width的吸收能力强于margin)

    (1)  若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
   
    (2)  在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto(左右各吸收一半)
   
    (3)  在常规流中，块盒在其包含块中时，将width设置为auto，左右margin设置为负数，width会随之变宽，吸收剩余内容，达到块盒的总宽度，刚好等于包含块的宽度的代数和
   
    (4) 每个块盒垂直方向上的auto值:
   
                 height：auto(默认值)，被内容撑开
                 
                 margin：auto(默认值)，表示0
   

• 百分比取值

1. padding、width、margin可以取值为百分比(所有百分比都是相当于包含块的宽度，跟高度没有关系)

       高度的百分比：
   
           （1） 包含块的高度取决于子元素的高度(父元素没设置宽高)，这种情况设置宽高无效
   
           （2） 包含块的高度不取决于子元素的高度(父元素设置宽高)，百分比相对于包含块的高度
   

• 上下外边距的合并

1. 两个常规流块盒，上下外边距相邻，会进行合并(两个外边距的最大值)

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

• 补充

     当内容盒的宽高设定好，设置padding占取剩余空间（原本是margin-left占据剩余）
  
     当内容盒的宽高没有设定，宽度等于页面最大宽度，设置padding占取内容盒空间
  

2. 浮动流

浮动的应用

• 文字环绕
• 横向排列

浮动的基本特点

• float属性值

     - left: 左浮动,元素靠上靠左排列
     - right: 右浮动,元素靠上靠右排列
     - none: 默认值, 常规流
  
       注： 1.当一个元素浮动,元素必定为块盒(更改display属性为block)
           2.浮动元素的包含块，和常规流一样，为父元素的内容盒
  

• 盒子尺寸

    （1）宽度为auto时，适应内容宽度，如果没内容，则宽度为零  (如果是常规流，没有内容，
          会默认父级宽度,有内容也会用margin-leftz撑满整个包含块的宽度)
  
    （2）高度为auto时，与常规流一样，适应内容宽度
  
    （3）在常规流中，margin左右为auto时，会吸收父级元素剩余内容居中，如果内容占满了，margin就没有用了
            在浮动流中，margin为auto时，会自动设置为0
  
    （4）边框、内边距、百分比设置与常规流一样
  

• 盒子排列特点

    （1）左浮动的盒子靠上靠左排列
        右浮动的盒子靠上靠右排列
  
     （2）浮动盒子在包含块中排列时，会避开常规流块盒 
  
     （3）常规流块盒在包含块中排列时，不会避开浮动盒子 （看不见浮动元素的位置）
  
     （4）行盒在排列时，会避开浮动盒子
  
     （5）外边距合并不会发生(公用一个外边距)
  

  注： 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒(类似span)

• 盒子高度坍塌

     （1）原因：高度坍塌的原因：父级常规流盒子的自动高度，不会考虑浮动盒子
  
     （2）解决办法：清除浮动盒子的浮动
   
             清除浮动，涉及css属性：clear
            
              - none： 默认值
              - left： 清除左浮动，该元素必须出现在前面元素的左浮动盒子的下方 (看一下天上左边浮动元素的位置)
              - right：清除右浮动，该元素必须出现在前面元素的右浮动盒子的下方 (看一下天上右边浮动元素的位置)
              - both： 清除两边浮动，该元素必须出现在前面元素的浮动盒子的下方 (清除上面元素的浮动，就可以出现盒子下方，撑开盒子）
  
             例:  .clear::after{
                         content: "";
                         display:block;  //默认行盒
                         clear:both;
                   }
  

• 盒子占位

       （1）块元素独占一行
  
       （2）float(浮动)
              float:left; //可以使块元素从左到右依次排列，#可以同在一行,直到排不下
              flaot:right;//可以使块元素从右到左依次排列，#可以同在一行,直到排不下
  
        ### 补充
                      浮动盒子的顶边不得高于上一个盒子的顶边
  
                      若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左向右排列