8.脱离标准文档流（浮动/固定定位/绝对定位）

1. 盒子居中：margin:0 auto;
   
2. 浮动元素脱离了标准文档流

   d1盒子脱离了标准文档流，d2盒子因此成为了标准文档流第一个，位于页面左上方，d1盒子浮动在d2上
   .d1{
    float:red;
    background-color:red;
    width:100px;
    height:100px;
   }
   .d2{
    background-color:blue;
    widht:200px;
    height:200px;
   }
   <div class="d1"></div>
   <div class="d2"></div>
   span为行内元素，脱离了标准文档流，未设置display:block也能设置宽高
   span{
    float:left;
    width:20px;
    height:20px;
   }
   <span>你好</span>
   <span>你好</span>

3. 浮动的元素互相贴靠

   如果空间足够，则3贴着d2，不够则贴着d1。3若比2宽，页面宽度够2不够3排列时，3会去贴左侧边缘
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>

   
4. 浮动的元素有“字围效果”

   浮动的元素能挡住盒子，但挡不住盒子里的文字，文字会围绕浮动元素
    .d1{
     float:left;
     width:30px;
     height:30px;
     background-color:red;
    }
    .d2{
     width:50px;
     height:50px;
     background-color:blue;
    }
   <div class="d1"></div>
   <div class="d2">123我爱你</div>

   
5. 浮动的收缩

   一个浮动的元素如果没设置width,那么宽度自动收缩为文字的宽度

6. 父子盒模型

   如果父盒子的width小于子所有盒子的width与padding之和，那么从超过的第一个子盒子将另起一行排列。