css布局小结

默认文档流  线性布局，对页面布局不加任何修饰
    特征：
    文档结构从外到内，自上而下，从左到右
    应用：第一层结构的布局 H5语义化标签/div+css（宽度、高度、背景色、边框）
    1.块级元素：宽度默认100%，高度默认由子元素填充好，宽高可以自己自定义
    2.行内元素：宽高都是由内容决定的  不可以自定义
    同级别块级元素：垂直方向的线性结构
    同级别行内元素：水平方向的线性结构
    正常的文档流结点树
    块级元素《--》行内元素
    inline 行内元素
    inline-block 行内块级元素  可以共享空间、同时指定宽高、可以包含块级元素
    浮动布局：
    脱离正常的文档流、脱离结点树
    和兄弟节点之间：浮动在后面的兄弟节点之上
    作用：块级元素自上而下，从左到右   列布局  一行多列
    float 所有的子节点都脱离了文档流，失去对父元素的支撑  导致结果：父元素高度为零
    后边的兄弟元素占据浮动的前面的兄弟位置的元素
    浮动：float：left/right   针对修饰的当前元素进行脱离
          float：left
          margin-left
          margin-top

          float：right
          margin-right 
          margin-top
    浮动产生的问题
          1.失去对父元素的支撑
    解决方法clear：both
           父元素：设置高度
           父元素：overflow:hidden
          2.兄弟元素会顶上来
    解决方法clear:both  对之前元素进行冻结
           书写位置：可以是下一个非浮动的兄弟节点 <div class="clearboth"></div>
           在下一个位置新增一个兄弟  伪元素 

  父元素：：after{
                  content:''
                  display:block;
                  clear:both;
              }  (子不教父之过，给父元素加）
      position:定位布局   top/left/right/bottom
         有叠加元素、到指定位置、细节位置
         position：static 静态定位：默认文档流  不搭配top/left/right/bottom

         子绝父相（子元素是相对定位，原来的位置依然占有位置，父元素是绝对定位，原来的位置不再占有位置）
         position:relative 相对定位（最大的作用是给absolute当爹）：【自己原来的位置】进行移动，不脱离文档流
         position：absolute 绝对定位：【有定位祖先元素】进行移动，脱离文档流
         position:fixed  固定定位：【相对于浏览器的可视化页面】  脱离文档流
                        z-index （人与电脑之间的方向）值人为设置最高，如广告,二级菜单