欢迎光临
我的个人博客网站

浅谈BFC格局~


1.BFC含义💳

BFC全称: Block Formatting Contexts  块级元素格式化上下文

  • W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系

  • 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型,不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器)

  • BFC内部的元素和外部的元素不会互相影响~~🎈

2.BFC触发条件🔨

满足以下条件之一就可触发BFC

  1. 根元素
  2. float 的值不为 none

  3. overflow 的值不为 visible

  4. display 的值为 inline-block、table-cell、table-caption

  5. position 的值为 absolutefixed

3.BFC布局规则🔒

  • 浮动的元素会被父级计算高度(父级触发了BFC)
  • 非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)
  • margin不会传递给父级(父级触发了BFC)
  • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  • BFC 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
  • 计算 BFC 的高度时,浮动元素也会参与计算
  • BFC 的区域不会与 float box 重叠

3.BFC作用🔧

◾ 1)自适应两栏布局

◾ 2)可以阻止元素被浮动元素覆盖

◾ 3)可以清除内部浮动

◾ 4)可以阻止margin重叠

BFC在前端页面布局中十分常见也灰常重要~

赞(0) 打赏
未经允许不得转载:张拓的天空 » 浅谈BFC格局~
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏