【CSS】BFC

先说BFC

BFC是什么?


  BFC(Block Formatting Context),即“块级格式化上下文”。

  简单说来,BFC就是指一个环境。

  它是W3C CSS2.1规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其它元素之间的关系和相互作用。

  一个BFC环境中的元素不会影响其它BFC环境中的布局。例如:浮动元素会形成BFC环境,浮动元素内部的子元素主要受此浮动元素影响,两个浮动元素之间是互不影响的。类似于独立的行政单位。

 

如何产生BFC?


  当一个HTML元素满足以下任何一点,会产生BFC:

  • float 的值不为 none
  • overflow 的值不为 visible
  • display 的值为table-cell,table-caption,inline-block中的任何一个
  • position 的值不为 relative 和 static

 

BFC的表现规则是什么?


  1.创建了BFC的元素中,其子元素按文档流一个接一个地放置。在垂直方向上,它们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin‘。

  •   两个相邻的普通流中的块框在垂直位置的空白边会发生margin重叠
  •   生成BFC的元素不会和在流中的子元素发生margin重叠

   2.在BFC中,每个子元素的左外边(即margin边)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边),除非这个子元素创建了新的BFC。

   3.BFC 就是页面上的独立容器,容器里面的子元素不会在布局上影响到外面的元素。

   4.创建了BFC的子元素不能与同一个BFC环境下的浮动子元素重叠。

   5.计算生成BFC的元素高度时,其浮动元素的高度应该参与计算。

 

举例


 

  例子一:

  CSS

body, p { padding:0; margin:0; }
#red, #yellow, #orange, #green { width:100px; height:100px; float:left; }
#red { background-color:red; }
#yellow { background-color:yellow; }
#orange { background-color:orange; }
#green { background-color:green; }

  HTML

<div id="c1">
    <div id="red"></div>
    <div id="yellow"></div>
</div>
<div id="c2">
    <div id="orange"></div>
    <div id="green"></div>
</div>
<p>Here is the text!</p>

  结果如图

  

  4个浮动元素没有重叠,而是从左到右排列,它们位于同一个BFC环境下。

  符合第4个规则:创建了BFC的子元素不能与同一个BFC环境下的浮动子元素重叠。

  但是我们希望出现两行两列的效果,该如何做呢?将#c1/#c2创建BFC即可将其高度能够包住其内的浮动子元素,形成两行两列的效果。

  增加的CSS

#c1{overflow:hidden;}
#c2{overflow:hidden;}

  结果是

  

     例子二:不和浮动元素重叠

  CSS

.aside{background:#f00;width:170px;float:left;height:300px;}
.main{background:#090;height:100%;}

  HTML

<div class="aside"></div>
<div class="main"></div>

此时,绿色的块被红色块挡住了,二者重叠了,因为我们可以加一句

.main {
     overflow: hidden;
}

结果是

 

  符合第4个规则:创建了BFC的子元素不能与同一个BFC环境下的浮动子元素重叠。

  

总结


  还没有结束,hasLayout神马的,暂未更新

【CSS】BFC,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。