CSS的浮动 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天。

1. 浮动的概述

CSS中的浮动（float）是指将元素向左或向右移动,同时其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止，如果没有，则以浏览器的边界作为边框。

2. 浮动特性

（1）脱离标准普通流的控制移动到指定位置（俗称脱标）

（2）浮动的盒子不再保留原先的位置（例子以及效果图如下）

  .box1 {
         float: left;
         width: 100px;
         height: 100px;
         background-color: pink;
         }
  .box2 {
         width: 200px;
         height: 200px;
         background-color: skyblue;
         }
   <div class="box1">浮动的盒子</div>
   <div class="box2">标准流的盒子</div>

（3）多个盒子设置浮动，会按照属性值一行内显示并且顶端对齐排列

      .box1 {
             float: left;
             width: 100px;
             height: 100px;
             background-color: pink;
             }
      .box2 {
             float: left;
             width: 200px;
             height: 200px;
             background-color: skyblue;
             }

（4）任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。例如，如果行内元素有了浮动，则不需要转换为块级或者行内块元素就可以直接给高度和宽度。但是，如果块级盒子没有设置宽度，默认宽度和父级一样，加了浮动后，它的大小根据内容来决定。

3.清除浮动的原因

（1）使用浮动会出现margin，padding设置不能正确显示，因为浮动会导致父级子级之间设置了padding，导致了属性不能正常传达，导致margin不能正常显示。

（2）如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开，导致背景不能显示。

（3）边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。

4.清除浮动的常见四种方法

（1）额外标签法：要清除谁的浮动，就在其后面添加一个空白标签。

  <div class="box">
       <div class="damao">大毛</div>
       <div class="ermao">二毛</div>
       <div class="clear"></div>
  </div>
  .clear {
          clear: both;
         }

（2）父级添加overflow方法：通过给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

 .box {
       overflow: hidden;
       width: 800px;
       border: 1px solid blue;
       margin: 0 auto;
       }

（3）after伪元素法：不需要单独加标签，IE6、7不支持，需要IE8以上和非IE浏览器才支持。

 .clearfix:after {
                  content: "";
                  display: block;
                  height: 0;
                  clear: both;
                  visibility: hidden;
                  }
  .clearfix {
             *zoom: 1;
            }

（4）双伪元素法

 .clearfix::before,
 .clearfix:after {
                  content: "";
                  display: table;
                 }
 .clearfix:after {
                  clear: both;
                 }
 .clearfix {
            *zoom: 1;
           }