为了不出 bug，用了浮动之后，一定要清除浮动。使用 class="clearfix"

float 的属性值

1. none

   初始值，表明元素不进行浮动

2. left

   表明元素浮动在其所在的块容器左侧

3. right

   表明元素浮动在其所在的块容器右侧

4. inline-start (这是一个实验性的API，尽量不要在生产环境中使用)

   表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。

5. inline-end (这是一个实验性的API，尽量不要在生产环境中使用)

   表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

注意：不存在center 这个属性值, 浮动元素是浮动在块容器的 padding 以内的。

浮动元素的定位

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

• 脱离 nomal flow

  img{float:left;}

  1. 脱离了文档流，即使图片是块级元素的子元素，但是计算块级元素的高度时，它不会被计算在内。
  2. 如果是 nomal flow 加上图片，图片会撑开当前行的高度，文字与图片的 baseline 对齐，页面看上去不工整。 而浮动会产生图文环绕的效果。

• 对元素 display 的影响

  1. 除了 display：flex /inline-flex /inline-table 之外，其他的元素的 display 都会变block， 而且手动修改 display ，还不能够覆盖。

• 对文本元素的影响

  1. 文字环绕在其周围，图片在当前行往左浮动，四周的文字（内联元素）被挤到右边

• 对块级元素的影响

  1. 浮动元素会浮动到块级元素的上一层，就好像块级元素看不见这些浮动元素，但是块级元素中的文本还是会环绕在图片周围。

• 对浮动元素的影响

  
  

清除浮动

• 方法一：

  在图片下方增加一个空的 div 并将设置其 css 为：style="clear:left" (即这个 div 的左边不能有浮动，就是就将这个 div 移到了图片下方)

  .clearfix::after{
    content:'';
    display:block;
    clear:both;
  }

上面的代码就是清除浮动的经典方法

• 方法二：

  div.parent{
    overflow:hidden;
    height:auto;
  }