BFC的学习

       网上有许多关于BFC的文章,看得我眼花缭乱,似懂非懂,因此本身写一篇BFC的文章,加深本身的记忆力,也但愿能帮到你们。html

       首先咱们要了解什么是BFC,BFC全称是Box  Formatting  Content,即块级格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定义的一个概念。在讲BFC以前,咱们还要了解什么是Box、Formatting  Content,以及视觉格式化模型。在个人上一篇文章中详细讲了视觉格式化模型和Box,因此如今很少说。
1、Box:CSS的布局的基本单位
       Box是CSS布局的对象和基本单位,直观点来讲,就是一个页面是由不少个Box组成的。元素的类型和display属性,决定了这个Box的类型。不一样类型的Box,会参与不一样的Formatting  Content(一个决定如何渲染文档的容器),所以Box内的元素会以不一样的方式渲染。盒子的类型有:
       block-level  box:display属性为block,list-item,table的元素,会生成block-level  box。而且参与block  formatting  context
       inline-level  box:display属性为inline,inline-block,inline-table的元素,会生成inline-level  box。而且参与inline  formatting  context
2、Formatting  Context
       Formatting  context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,而且有一套渲染规则,它决定了其子元素将如何定位,以及和其余元素的关系和相互做用。最多见的Formatting  context有Block  formatting  context(简称BFC)和Inline  formatting  context(简称IFC)。
       CSS2.1中只有BFC和IFC,CSS3中还增长了GFC和FFC。
3、BFC的生成
       BFC(Block  formatting  context),块级格式化上下文,它是一个独立的渲染区域,只有Block-level  box参与,它规定了内部的Block-level  Box如何布局,而且与这个区域外部绝不相干。
一、什么样的元素能生成BFC?
       CSS2.1中规定,知足下列CSS声明之一的,即可以生成BFC:
             设置除float:none之外的属性值(如:left/right)
             设置除overflow:visible之外的属性值(如:hidden/auto/scroll)
             设置display属性值为:inline-block/flex/inline-flex/table-cell/table-caption
             设置position属性:absolute/fixed
             设置fieldset元素(能够给表单元素设置环绕边框的html元素)
二、生成BFC后会怎么样?
       BFC布局规则:
             内部的Box会在垂直方向,一个接一个地放置
             Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠
             每一个元素的margin  box的左边,与包含块border  box的左边相接触(对于从左往右的格式化,不然相反)。即便存在浮动也是如此。
             BFC的区域不会与float  box重叠
             BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
             计算BFC的高度时,浮动元素也参与计算
三、BFC的做用是什么?
        防止margin重叠
               同一个BFC中俩个相邻的box才会发生重叠与方向无关,不过因为上文提到的第一条限制,咱们甚少看到水平方向的margin重叠。这在IE这中是个特例,IE能够设置write-mode。
               要阻止margin重叠,只要将俩个元素别放在一个BFC中便可(能够用上文提到的方式让相邻元素其中一个生成BFC)。阻止俩个相邻元素的重叠看起来没有意义,主要用于嵌套元素。
         清除浮动
                使得父元素包含子元素,常见的方式是为父元素设置overflow:hidden或者浮动父元素。根本缘由在于建立BFC的元素,子浮动元素也会参与高度计算,即不会产生高度塌陷的问题。 
         多栏布局
                每一个元素的margin  box的左边,与包含块border  box的左边相接触
相关文章
相关标签/搜索