BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。块格式上下文是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的创建方法：
1.根元素或其他包含他的元素
2.浮动（float不为none）
3.绝对定位元素（position为absolute或者fixed）
4.行内块（元素为inline-block）
5.表格单元格（display:table-cell）
6.overflow的值不为visible
7.弹性盒：display :flex
BFC的作用：
1.内部的盒会在垂直一个个排列
2.处于同一个BFC的元素互相影响，可能会发生边缘折叠
3.每个元素的marginbox的左边与容器块的borderbox的左边相接触
4.让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
5.计算元素高度时，浮动元素也会被计算在内
6.浮动盒区域不叠加在BFC上
参考掘金网易考拉团队的文章 BFC全称是Block Formatting Context，即块格式化上下文。它是C...
预备知识 为了便于理解BFC，我们需要知道下面的概念 Box Box是CSS布局的基本单位，直观点来说，就是一个页...
前言 本文包括以下内容： 什么是BFC 如何产生BFC BFC的特点 应用BFC 1、什么是BFC BFC （Bl...
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染...
一、 BFC 及其应用 1、BFC 概念 BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，...
CSS 1. 介绍BFC及其应用 BFC的全称是block format context, 块级格式化上下文，简单...
关于 BFC 的布局应用：清除浮动、文字环绕 参考文档：理解CSS中BFC BFC（Block Formattin...
BFC是什么？ BFC（Block Formatting Context）中文直译就是‘块级格式上下文’，它是 W...
描述BFC（块格式化上下文）及其工作原理。 BFC 即 Block Formatting Contexts (块级...
一、 BFC的概念和应用 1. BFC的概念 BFC的全称是 Block Formatting Contexts，...
本文标题：关于BFC及其应用
本文链接：https://www.haomeiwen.com/subject/pfjvdctx.html
网友评论