浮动 页面布局

  传统的网页布局方式有三种:
   1.普通流{标准流 文档流}
   2.定位
   3.浮动    
  网页布局本质:通过css来实现摆放盒子,把盒子放到相应的位置上

  标准流中，在页面布局过程中遵循标准流规范，元素是从左到右，从上到下，块元素独占一行，行元素共享一行 按照规定好的默认方式排列
   1.块级元素:独占一行,从上到下的排列
   2.行内元素:从左往右排列,碰到父元素边缘会自动换行
   以上都是标准流布局,最基本的布局方式

  定位:相对定位 绝对定位  固定定位

  浮动:为了让多个块元素水平排列一行
    float 属性用创建浮动框,将其移到一边,直到左边缘或者右边缘触及到另一个浮动框的边缘
  选择器{float:属性值} left: 左浮动  right: 右浮动     none 元素不浮动 默认值
    浮动元素只会压住下面标准流的盒子,但是不会压住下面标准流盒子里面的文字或者是图片
    浮动最初就是为了做文字环绕的效果,文字会围绕浮动元素
   特点:
    1.浮动元素会脱离文档流(脱标)浮动的盒子不在保留位置
    2.对于浮动元素来讲,浮动元素会在一行上显示,并且元素顶部对齐,浮动元素是互相贴靠在一起(不会有缝隙) 如果父容器装不下这些浮动的盒子多出的盒子会另起一行
    3.如果行内元素有了浮动,则不需要转换块级.或者行内块元素,就可以直接设置宽度和高度
      如果块级元素没有设置宽度的情况下默认宽度和父级一样宽,但是有了浮动以后他的宽度(大小)根据内容来决定
      浮动元素具有行内块元素的特性 任何元素都可以浮动,不管原来是什么模式的元素,添加浮动以后有行内块元素的相似特性

  搭配使用:
    浮动元素经常和标准流父级搭配使用,如果没有父盒子为约束总是以浏览器为准进行浮动
      为了约束元素浮动位置,布局一般策略:
     先用标准流的父元素排列上下位置,之后子元素采用浮动排列左右位置.

  浮动布局两个注意点:
   1.浮动布局和标准流的父盒子搭配使用,标准流控制上下排列,内部子元素采取浮动排列左右布局(都需要设置浮动效果)
   2.一个元素浮动了其他的元素也需要浮动设置

   

 清除浮动：
    需要清除浮动的情况{三点必须同时满足}
        1.父级没有高度
       2.子元素采用浮动
       3.影响到后面的标准流盒子
        受影响的元素添加浮动
    前面浮动元素有一个标准流盒子，他们都有一个共同的特点，都是由高度，但不是所有的父盒子都会加高度，由于父容器很多时候不加高度子元素采用浮动会脱标，
    父盒子识别不到高度，高度变为零，会影响下面的标准流盒子
  1. 语法结构：
   选择器{clear：属性值}
 2.属性值
    left 清除左浮动的影响
    right 清楚右浮动影响
    both  同时清楚左右两边的浮动

  3. 清除浮动的方法：
     1.额外标签法
     2.父级添加 overflow
     3.父级添加 after伪元素
     4.给父级添加双伪元素
 
 3-1.额外标签法： 空标签必须是块级元素
      使用方法：在浮动元素的末尾添加一个空的标签出来
       要求：新添加的空标签必须是块级元素 不能是行内元素
       缺点：结构不是最优化 结构有些复杂
      
 3-2.父级添加 overflow
    这种方式不能很准确的说是清除浮动，只是取消了浮动带来的影响，借助bfc（块格式化上下文）的特点，这个容器里面的浮动元素会参与父盒子的高度的计算
       overflow: ;取消浮动带来的影响  里面任何元素都可以 如：给父级添加 hidden    auto   viible（默认值） scroll
    缺点：溢出部分无法显示
 
 3-3。给父元素添加 伪元素
       .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
 
  3-4.给父级添加双伪元素
       样式：    标签名::before,
                 标签名::after{
                   content: "";
                   /* display: table;表格 没有内容也会自成一行 将对象作为块级元素的表格显示*/
                   display: table;
                   
               }
               标签名::after{
                   clear: both;
               }
               .clearfix（标签名）{
                   *zoom:1
                }