清楚浮动的方法和BFC、hasLayout

2017-07-19 本文已影响40人 sdcV

清理浮动两种方式

利用 clear属性，清除浮动
使父容器形成BFC

考虑下列情景：

 html:
  <div class = 'outer'>
      <div class= 'inner'>
            第1个div
      </div>
      <div class='inner'>
            第2个div
      </div>
      <div class='inner'>
            第3个div
      </div>
  </div>
 css:
 .outer{
     padding:10px 10px;
     border:solid 1px #a33;
 }
 .inner{
      width: 30%;
      margin-left:5px;
      text-align: center;
      background-color:rgb(60,179,113);
      float:left;
 }

希望是这样：

预期.png

实际上却是这样：

实际.png

为什么会这样呢？

在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。

解决办法

1. 在浮动元素新增一个非浮动元素用来清楚浮动

  <div class = 'outer'>
      <div class= 'inner'>
            第1个div
      </div>
      <div class='inner'>
            第2个div
      </div>
      <div class='inner'>
            第3个div
      </div>
          <div style="clear:both;">
          </div>
  </div>

原理：是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。
优缺点：这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

2. 父辈见overflow:hidden,激发BFC清楚浮动

  <div class = 'outer' style= "overflow:hidden;">
  ....

原理：BFC可以包含浮动，清除这个父元素中的子元素浮动对页面的影响。
优缺点:一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

3. 通过CSS语句添加子元素,利用:after伪元素,给父类加新样式。

  <div class = 'outer clearfix">
  ....

  .clearfix:after { // "clearfix"是父容器的class名称
      content: ""; //"content:"";"是在父容器的结尾处放一个空白
      display: block;//是确保这个空白是非浮动的独立区块。
      height: 0;
      clear: both;
  } 
  .clearfix {
      zoom: 1;//:after选择符IE 6不支持,我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性
  }

原理：after伪选择符可以在父容器的尾部自动创建一个子元素，不用额外添加一个元素。
使用频率很高

其它就不介绍了，大同小异。例如：双伪元素清除浮动、浮动的父容器等。

附录：BFC和hasLayout简单介绍

BFC:就是block formatting context的缩写，中文就是“块级格式化上下文”的意思。它有三个特性：

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠.
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
BFC不会重叠浮动元素
BFC可以包含浮动

触发BFC的情形

float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

hasLayout:我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。

看看怎么使元素hasLayout为true.

position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl

简单介绍这么多，细节可自行Google。