zoukankan      html  css  js  c++  java
  • 个人对BFC的见解

    BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。

      BFC的生成

      既然上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

    • 根元素
    • float的值不为none
    • overflow的值不为visible
    • display的值为inline-block、table-cell、table-caption
    • position的值为absolute或fixed

      看到有道友文章中把display:table也认为可以生成BFC,其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-ccell生成了BFC

      BFC的约束规则

     浏览器对于BFC这块区域的约束规则如下:

    • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
    • 生成BFC元素的子元素中,每一个子元素做外边距与包含块的左边界相接触,(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。

      有道友对它做了分解,我们直接拿来:

    1. 内部的Box会在垂直方向上一个接一个的放置
    2. 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。)
    3. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
    4. BFC的区域不会与float的元素区域重叠
    5. 计算BFC的高度时,浮动子元素也参与计算
    6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

      看到以上的几条约束,让我想起学习css时的几条规则

    • Block元素会扩展到与父元素同宽,所以block元素会垂直排列
    • 垂直方向上的两个相邻DIV的margin会重叠,而水平方向不会(此规则并不完全正确)
    • 浮动元素会尽量接近往左上方(或右上方)
    • 为父元素设置overflow:hidden或浮动父元素,则会包含浮动元素
    • ......

      哈哈,一股恍然大悟的感觉有木有,原来这些规则的背后都有更深层的概念,冥冥之中自有定数。。。

      

  • 相关阅读:
    linux学习笔记 ftp命令
    linux 学习笔记 wc命令
    linux 学习笔记 finding people
    通配符
    linux 学习笔记 管道 pipe ls cp mv
    linux学习笔记 其他常用命令
    linux 学习笔记 执行脚本篇章
    solr分词一:mmseg4j
    solr介绍一:Analyzer(分析器)、Tokenizer(分词器)
    solr-4.10.2版本使用tomcat7部署
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/10500881.html
Copyright © 2011-2022 走看看