说一下浮动？

浮动的作用：设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

浮动的特点： 设置了浮动，该元素脱标。元素不占位置-浮动可以进行模式转换（行内块元素）

浮动造成的影响：使盒子脱离文档流，如果父级盒子没有设置高度，需要被盒子撑开，那么这时候父级盒子的高度就会塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。

期待效果：

 

  <style>
    .box{
      border: 1px solid black;
      width: 600px;
      padding: 5px;
    }
    .left{
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }
    .right{
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }
  </style>

  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <p>sadfsdfsdfsadfdsfasf</p>

 代码效果：父级高度塌陷、影响兄弟布局

 清除浮动：

1、将父级也设置成浮动：这种方法肯定是弊大于利，想想都知道，父级设置成浮动了，那爷爷级肯定又会受影响，又得解决爷爷级的高度塌陷，进入了无限套娃。

 .box{
      border: 1px solid black;
      width: 600px;
      padding: 5px;
      float: left;//父级设置浮动
    }
    .left{
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }
    .right{
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }
  </style>

  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <p>sadfsdfsdfsadfdsfasf</p>

 2、给父级增加定位absolute：脱离文档流、影响了整体布局

    .box{
      border: 1px solid black;
      width: 600px;
      padding: 5px;
      position:absolute;//父级设置定位
    }

 

 3、给父级设置overflow：hidden：当文本过长，且包含英文时，会出现英文文本被隐藏的情况

    .box{
      border: 1px solid black;
      width: 600px;
      padding: 5px;
      overflow: hidden;//
    }

 4、给父级设置对应的高度：如果浮动元素不是定宽的话，这种方式很不灵活。

 .box{
      border: 1px solid black;
      width: 600px;
      padding: 5px;
      height: 100px;//父级设置相应的高度
    }

 5、末尾增加空元素进行clear：增加了一个div标签，增加页面的渲染负担

    .clearDiv{
      clear: both;
    }


   <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearDiv"></div>
   </div>
  <p>啦啦啦啦啦sadfsdfsdfsadfdsfasfsdfsdfsdfsdfsdfsdfsdfsdf撒打发斯蒂芬水电费水电费水电费 
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfdsfsdfsdfsdfsdfsdfsd</p>

 6、给父级添加伪元素进行clear：用伪元素代替上面的div。

    .box::after{
      content: '';
      height: 0;
      display: block;
      clear: both;
    }