高端设计网站都有哪些,wordpress阅读次数修改,工作服定制,科技百科定义
BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域#xff0c;只有Block-level box参与#xff0c; 它规定了内部的Block-level Box如何布局#xff0c;并且与这个区域外部毫不相干。
涉及概念
box
Box 是 CSS 布局的对象…定义
BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域只有Block-level box参与 它规定了内部的Block-level Box如何布局并且与这个区域外部毫不相干。
涉及概念
box
Box 是 CSS 布局的对象和基本单位 直观点来说就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性决定了这个 Box 的类型。 不同类型的 Box 会参与不同的 Formatting Context一个决定如何渲染文档的容器因此Box内的元素会以不同的方式渲染。
Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域并且有一套渲染规则它决定了其子元素将如何定位以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)
BFC是一个独立的布局环境其中的元素布局是不受外界的影响并且在一个BFC中块盒与行盒行盒由一行中所有的内联元素所组成都会垂直的沿着其父元素的边框排列。
作用
1.使用bfc避免margin重叠
2.自适应两栏布局
3.清除浮动
如何创建bfc
1.float的值不是none。
2.position的值不是static或者relative。
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值不是visible
总结
BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响因此 当BFC外部存在浮动时它不应该影响BFC内部Box的布局BFC会通过变窄而不与浮动有重叠。同样的当BFC内部有浮动时为了不影响外部元素的布局BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
