CSS 浮动和清除浮动

CSS 浮动和清除浮动

1.浮动是什么

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。

2. 浮动的值

• left 表明元素必须浮动在其所在的块容器左侧的关键字。
• right 表明元素必须浮动在其所在的块容器右侧的关键字。
• none 表明元素不进行浮动的关键字。
• inline-start 关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
• inline-end 关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

3.浮动的特性

• 脱离标准流
• 浮动的元素之间不会有缝隙
• 浮动元素具有行内块特征

4.为什么要清除浮动

一般在使用浮动的时候：父元素是标准流的，而且一般不设置高度，而其子元素都设置为浮动的话，父元素高度塌陷 == 0。会影响到父元素下面的兄弟元素在文档中的位置（一般其兄弟元素会被浮动元素叠在下面）。

5.清除浮动的方法

• 额外标签法：

  在所有浮动元素后面加一个元素，如div，为这个块级元素添加 clear:both; 的样式

• ::after 伪元素：

  .clearfix::after{   /* .clearfix 是标准流的父元素 */
      content: " ";
      display: block;
      height: 0;
      clear: both;
  }
  
  .clearfix{
      *zoom: 1;	/* 触发hasLayout 兼容ie6、7 */
  }
  
  

• 双伪元素：

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

• 父元素触发BFC：

  最常见的做法是将父元素的 overflow 设置为除 visible 的值。

  可以根据不同页面的需求使用不同的方法触发父元素BFC，在不同的场景有的方法可能不能起到清除浮动的效果。