首页 > 代码库 > 关于由CSS2.1所提出的的BFC的理解与样例

关于由CSS2.1所提出的的BFC的理解与样例

  今天在这里谈谈css中BFC。“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。满足以下任何一条件,即可形成“BFC”。

1、float的值不为none。

2、overflow的值不为visible。

3、display的值为table-cell, table-caption, inline-block中的任何一个。

4、position的值不为relative和static。

  “BFC”的作用可以通过解决以下三个问题得到很好的体现:

问题一:避免和浮动元素重叠。如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个覆盖的现象,这时候我们可以通过以下方法解决,

    eg:

  <div style="float:left; border: 2px solid red"> 123</div>
  <div style="border: 2px solid blue;overflow:hidden;">
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
  </div>

  注:蓝色背景处是解决问题的关键。而这就属于通过创建一个“BFC”来解决布局问题。

问题二:清除元素的内部浮动。只要把父元素设为BFC就可以清理子元素的浮动了。然而对于IE6,需要加上zoom:1。在这里就会引出另一个概念:HasLayout,

    它是IE浏览器引擎内部特有的属性,它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时,这个元素才可以决定自己和其子孙   元素的布局。为数不多的元素默认这个属性值为true,包括:

  • body and html
  • table, tr, th, td
  • img
  • hr
  • input, button, file, select, textarea, fieldset
  • marquee
  • frameset, frame, iframe
  • objects, applets, embed

           所以,当发现有些元素的布局在IE下有异常时,可以有充分的理由来怀疑可能是hasLayout属性为false。而且这个属性值不能直接设置。一个元素要么默认拥有,要  么通过设置特定的CSS属性来获取。

问题三:嵌套元素的margin边距折叠。

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

  以上就是我现在对“BFC”的认识。

 

关于由CSS2.1所提出的的BFC的理解与样例