1.为什么要浮动

浮动诞生的的初期的作用是图文环绕，而现在的作用是更好的网页布局

浮动的应用场景

如何让多个块级元素一行显示多个
如何实现一个盒子中的两个子盒子分别左右对齐

2.浮动的语法和特点

语法:选择器{float:"属性值"}

属性值:

none:元素不浮动(默认值)
left:左浮动
right:右浮动

浮动之后的特性

1.浮动元素会脱离标准流（俗称脱标）：
a.脱离标准流的控制（浮），移动到指定位置（动）
b.浮动的盒子不再保留原先的位置

2.1.1两个标准流盒子

<div class="box1">标准流的盒子</div>

<div class="box2">标准流的盒子</div>

      .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
      }

      .box2 {
        width: 300px;
        height: 300px;
        background-color: blue;
      }

2.1.2一个浮动的盒子,一个标准流的盒子

<div class="box1">浮动的盒子</div>

<div class="box2">标准流的盒子</div>

.box1 {
        width: 200px;
        height: 200px;
        background-color: pink;

        float: left;
      }

      .box2 {
        width: 300px;
        height: 300px;
        background-color: blue;
      }

给这个box1盒子加了浮动之后，他就脱离了标准流浮了起来，那么之前的位置不保留(脱标)，
此时如果有别的标准流的盒子(浮动的盒子只影响浮动的盒子后面的标准流，不会影响前面的标准流)，那么这个位置就会被后面的标准流的盒子占领。（举例：就像我在排队时，我突然飞到天上了
那我原本的位置就被后面的人接上了）

2.2浮动后的元素会在一行内显示，并且会顶部对齐

<div>1</div>

<div class="two">2</div>

<div>3</div>

     div {
        width: 200px;
        height: 200px;
        background-color: pink;

        float: left;
        /* 给三个盒子设置浮动属性，他们就会在一行内显示并且互相紧靠在一起不会有缝隙
            （除非一行不够放，会自动换行）并且顶部对齐 */
      }
      .tow {
        width: 250px;
        height: 250px;
        background-color: aqua;
        float: left;
      }

2.3浮动的元素会有行内快的特性

<span>1</span>

<span>2</span>

<div>我是div标签</div>

<p>我是p标签</p>

      span,
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*
          原本span属于行内元素，直接设置宽高是不起效的.
          这时候，我给span设置了浮动，那么span就会具有行内块元素的特点 
        */
        float: left;
        /* 如果行内元素有了浮动，则不需要转换成块/行内块就可以直接给宽高 */
      }

      /*任何元素都可以浮动，不管原先是什么模式的元素，只要添加了浮动后，就会具有和行内块元素相似的特性 */

      p {
        height: 300px;
        background-color: skyblue;
        /* 在不添加浮动时，p属于标准流，且宽度和父亲一样宽 */

        float: right;
        /*给p这个块级盒子添加了浮动，他就有了行内块元素的特性，
        在具有height为300的基础上，他的宽与内容一样宽*/
      }

3.注意事项

浮动和标准流父盒子搭配:
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余兄弟元素也要浮动(子浮父不浮,兄弟一起浮)
比如一个盒子里面有多个盒子，如果其中一个盒子动了，那么其他的盒子也应该浮动，以免出现问题。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

4.为什么要清除浮动

理想中的状态是：让子盒子撑开父亲，有多少盒子，我父盒子就有多高
我不给标准流的父盒子设置宽高，我父盒子里面的子盒子全部添加了浮动，那么这时候本来不添加宽高的父盒子的高是与内容一样的，但是添加了浮动的盒子是不占位置的（投标），所以哪怕这些子盒子有很多，但他们都不会撑开父盒子，父盒子的高度为0
于父盒子很多情况下，不方便给宽高，但是子盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面的标准流盒子就是因为浮动元素不再占用原文档标准流的位置，对后面的元素排版产生影响

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
父级有了高度，就不会影响下面的标准流了

5.清除浮动

5.1直接给父盒子设置高

优点:简单,粗暴

缺点:在有些场合不适合设置高

5.2额外标签法

给谁清除浮动就在后面额外添加一个空标签设置clear：both

5.3给父元素添加overflow：hidden

优点:代码简洁！

缺点:无法显示溢出的部分！

5.4使用after伪元素清除浮动

::after方式是额外标签法的升级版。也是给父元素添加！
伪元素的写法是两个冒号，::after，写一个是为了照顾低版本浏览器
高版本浏览器会自动把一个冒号渲染成两个当我给父标签添加这个after这个伪元素之后，他会在盒子的最后面
新增一个盒子，只不过这个盒子是行内元素，所以要转换成块元素（就像额外标签法）
之所以说是额外标签法的升级版，是因为这样做就不用再去增加一个标签了。
这个标签是通过CSS生成的，虽然样式更多，但结构更清晰

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

5.5双伪元素清除

after伪元素是在最后面生成一个盒子，before是在最前面生成一个盒子

.clearfix:before,
.clearfix:after { 
        content: "";
        display: table;
        /* 将行内元素装换为块元素*/ 
    } 
.clearfix:after { 
        clear: both; 
    }

优点:代码更简洁

缺点:还要去兼容低版本浏览器

浮动的语法及使用