zoukankan      html  css  js  c++  java
  • 在什么情况下采用BFC

    介绍BFC的博文有很多,下面,我就从另一个角度解释一下“在什么情况下会使用BFC”

    以下仅代表我的个人看法,如果有错误的地方,还希望大家能告诉我,以免我在错误的道路上越走越远。

    一、BFC是什么

    Block Formatting Context 块元素 格式 上下文,他是一种特定触发条件下的规则。Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

       规则如下:

    float的值不为none。

           overflow的值不为visible。

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

           position的值不为relative和static。

     

    二、什么情况下用BFC

       观察BFC的几种触发方式。我们可以看出:这几种触发条件,表面上都是一些自身属性的设置,但是这几个属性都会带来“副作用”(比如:改变文档的流式布局;块级元素的自适应性;)简单的说:就是这几个副作用就是--后效性,  

       我们为了屏蔽这种副作用,就要触发BFC,通过BFC将副作用的影响范围控制住 。当我们为了局部效果将子元素和父元素中的一个使用了上面的触发条件。必然会引起属性效果的“向后非期望蔓延”BFC就是针对这几个属性的补救措施。但是之所以没有默认触发,可能是考虑到副作用可能是期望的效果,即选择的权利交给了开发人员。因此上我们是为了BFC效果,才触发了条件。而实际上是因为局部使用了有后效性的属性,我们才用BFC的规则将布局回归到正常。 以我的理解BFC可以翻译为“盒模型布局异常修正系统”。

  • 相关阅读:
    绘制SVG内容到Canvas的HTML5应用
    HT for Web 3D游戏设计设计--汉诺塔(Towers of Hanoi)
    HT for Web自定义3D模型的WebGL应用
    纯Shading Language绘制飞机火焰效果
    纯Shading Language绘制HTML5时钟
    HTML5版的String Avoider小游戏
    基于HT的CSG功能构建HTML5的3D书架
    HTML5 Web 客户端五种离线存储方式汇总
    基于HTML5的Drag and Drop生成图片Base64信息
    HT for Web可视化QuadTree四叉树碰撞检测
  • 原文地址:https://www.cnblogs.com/webARM/p/3780833.html
Copyright © 2011-2022 走看看