CSS - 浮动

1. 浮动

1.1 为什么需要浮动

• 浮动可以改动元素原有排列方式。最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则： 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1.2 什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块的边缘（父元素的边缘）或者另一个浮动框的边缘。

1.3 浮动的特性

1. 浮动元素会脱离标志流（脱标）—— 浮动的元素不再保留原来的位置，所以后面的盒子会顶上来，注意只影响后面的元素，不会影响前面的元素。 如下图所示，橙色的盒子浮动了，其位置不再保留，未浮动的蓝色盒子顶了上来
   

2. 浮动的元素会一行内显示并且元素顶部对齐。如下图所示，三个浮动的盒子（可能高度不同）始终保持上边沿对齐。
   

3. 浮动的元素会具有行内块元素的特性。任何元素都可以添加浮动，不管元素原来是行内元素还是块元素，当加了浮动了之后，就具有行内块元素的特性：

   • 如果行内元素加了浮动，则不需要转换为块级 / 行内块元素就可以直接给高度和宽度；
   • 如果块元素本来的宽带默认和父亲一样宽，但是加了浮动之后宽度右元素内的内容决定。

4. 浮动一般搭配标准流的父元素一起使用（使用标准流约束浮动元素），即先用一个标准流的父元素罩住所有需要浮动的元素，然后让元素在父元素内浮动。

1.4 浮动的注意点

1. 浮动和标准流的父盒子搭配使用：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
2. 一个元素浮动了，理论上其余的兄弟元素也要浮动：一个盒子里有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题（注意浮动的盒子只会影响后面的标准流）。

2. 清除浮动

2.1 为什么要清除浮动

• 现象：父盒子未给高度（在一些实际应用中需要让孩子撑开父盒子的高度，所以父盒子不主动添加高度），但是子盒子又是浮动的，导致父盒子的高度为0，影响了与父盒子同级的后面的标准流的布局。（1. 父级没高度；2. 子盒子浮动了；3. 影响了下面的布局）
• 结论：为了清除浮动盒子对后面标准流布局的影响，需要清除浮动

2.2 清除浮动的方法

• 清除浮动的本质：清除浮动元素脱离标准流造成的影响。
• 清除浮动的策略：闭合浮动，只让浮动在父盒子内部作用，不影响父盒子外面的其它盒子。

2.2.1 额外标签法

• 使用：在最后一个浮动的子元素的后面添加一个空标签，例如：<div style="clear:both"> </div>
• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，改变了结构
• 注意：这个新增的空标签必须是块级元素。

2.2.2 给父亲添加 overflow

• 使用：给父级元素添加 overflow 属性，将其属性值设置为 hidder、auto、scroll其中之一
• 优点：代码简洁
• 缺点：无法显示溢出部分，如下图所示，小方块右边超出大方块的部分被截断。
• 注意：overflow 属性是添加在父元素上的。

.box {
    /* 清除浮动 */
    overflow: hidden;
    width: 800px;
    border: 1px solid blue;
    margin: 0 auto;
}

2.2.3 :after 伪元素发法

• 使用：给父元素添加 clearfix 类属性

  .clearfix:after {
          content: "";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }
  
  .clearfix {
      /* IE6、7 专有 */
      *zoom: 1;
  }
  

• 优点：没有增加标签，结构更简单
• 缺点：需要额外照顾低版本浏览器
• 注意：给父元素添加的类属性

2.2.4 双伪元素清除浮动

• 使用：给父元素添加 clearfix 类属性

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

• 优点：代码更简洁
• 缺点：需要额外照顾低版本浏览器
• 注意：给父元素添加 clearfix 类属性