关于BFC

作者: 1w1ng | 来源:发表于2017-08-13 15:06 被阅读0次

BFC 是什么?

首先BFC(Block Formatting Contexts)中文是块级格式化上下文。BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。并且,在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

BFC的布局规则
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的垂直方向的margin会重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算

如何生成 BFC?

满足下面条件的任何一点,都会生成BFC

  • 根元素(整个页面就是一个大的BFC);
  • float属性不为none;
  • position为absolute或fixed;
  • display为inline-block, flex, 或者inline-flex;
  • overflow不为visible;

BFC 有什么作用?

1.左右两栏布局

image.png

让右边的div生成BFC就可以实现两栏布局

2.清理内部浮动

image.png

让父元素形成BFC,BFC也会计算其内部浮动子元素的高度。

3.防止margin重叠:

image.png

同一个BFC中的相邻Box垂直方向的margin会重叠,故要解决margin重叠问题,只需要让两个p元素处于不同的BFC就ok了。第一个p元素属于根元素BFC中,第二个p元素被div包裹属于新的BFC中。

相关文章

  • 关于BFC

    关于BFC BFC 定义: BFC(Block formatting context)块级格式化上下文:比如设置了...

  • 关于 BFC 的布局应用:清除浮动、文字环绕

    关于 BFC 的布局应用:清除浮动、文字环绕 参考文档:理解CSS中BFC BFC(Block Formattin...

  • CSS新手向的知识点<四>

    阅读本篇文章,你将大致了解到BFC的作用 关于BFC的知识 BFC(block formatting contex...

  • BFC神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用...

  • 什么是BFC(Block Formatting Context)

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用...

  • BFC的理解

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用...

  • 关于BFC

    BFC 块格式化上下文 创建BFC的情况(指路) BFC是盒子元素布局的区域以及浮动元素与其他元素交互的区域,是一...

  • 关于BFC

    BFC BFC 全称 Block Formatting Context。每个渲染区域用formatting con...

  • 关于BFC

    BFC 是什么? 首先BFC(Block Formatting Contexts)中文是块级格式化上下文。BFC是...

  • 关于BFC

    什么是BFC bfc( 块级格式化范围 )是web页面中盒模型布局的CSS渲染模式,他决定了元素如何对其内容进行定...

网友评论

      本文标题:关于BFC

      本文链接:https://www.haomeiwen.com/subject/xcmsrxtx.html