css浮动

• 为了不出 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;
    }