重学前端-块格式化上下文

块格式化上下文

块格式换上下文：（Block Formatting Content，BFC），页面中独立的块级渲染区域，该区域有一套渲染规则，用来约束块级盒子的布局，与本区域外无关。

触发BFC的条件

浮动元素
overflow: hidden/auto/scroll
绝对定位属性的元素（position: absolute/fixed）
display: inline-block/table-cell/table-caption
...

BFC可以解决的问题

margin重叠

浮动导致的高度塌陷

原文地址：https://www.cnblogs.com/cactus1102/p/12663942.html

时间： 2024-11-07 22:53:12

重学前端-块格式化上下文的相关文章

块格式化上下文（Block Formatting Context，BFC）

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格式化上下文: 根元素或包含根元素的元素浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) 行内块元素(元素的 display 为 inline-block) 表格单元格(元素的 display为 table-cell,HT

前端面试题-BFC(块格式化上下文)

一.BFC 的概念 1.规范解释块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. 2.通俗理解 BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品. 如果一个元素符合触发 BFC 的条件,则 BFC 中的元素布局不受外部影响. 浮动元素会创建 BFC,则浮动元素内部子元素主要受该浮动元素影响,所

2020重学前端parseInt

2010年就开始学前端,最早使用parseInt这个函数已经不记得具体时间了,在我的概念里对它的使用了解是parseInt(string, radix);把string转成数字,radix参数是把数字以多少进制表示出来,一直到今天我99.99%的情况使用场景都是radix等于10,而且也没出现过什么问题.但是最近遇到一个题目['1', '2', '3', '4', '5'].map(parseInt)我竟然不能很准确的写出正确答案.所以我今天要重新学习一下这个方法了,在认真研究这个方法的时候,还

重学前端

先来看个大纲整个系列包含三个部分,即构建Web应用程序或页面要用的最基本的三部分:HTML.CSS和JavaScript. HTML部分 HTML语义:只用div和span是不是就够了? HTML语义:一篇wiki文章究竟会用到哪些语义元素? 文档元信息:你知道head里一共能写哪几种标签吗? 链接:除了a标签,还有标签叫链接? 嵌入型元素:怎么link一个CSS要用href,而引入JS要用src呢? HTML标签:标签总结 HTML语言:dtd到底是什么? ARIA:可访问性不止是给盲人用户

常规流之块级格式化上下文（Block Formating Context）

在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框(block-level-boxes)或行内级框(inline-level-boxes)的相对定位.常规流中的框属于一个格式化上下文,可能是块或者是行内,但不能同时都是.块级框参与块级格式化上下文,行内级框参与行内级格式化上下文.今天我们先来说说块级格式化上下文,也就是我们常说的BFC. 一.形成块级

块级格式化上下文（Block Formatting Context）

前言在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一下. 普通流(Normal Flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的

块级格式化上下文

初识块级格式化上下文(Block Formatting Contexts) 前言 html文档中元素的定位有3种方式(普通流.绝对定位.浮动),除普通流以外,浮动与绝对定位都会导致元素脱离普通流,按照各自的方式进行定位. 带有BFC属性的容器属于普通流的一种. 块级格式化上下文 (BFC) 块格式化上下文是页面 CSS 视觉渲染的一部分.它是用于决定块盒子的布局及浮动相互影响范围的一个区域. BFC是元素在拥有某些特定属性才显示的一种属性,有BFC特性的元素和其他普通流中的元素在样式上没有区别.

关于块级格式化上下文(Block formatting context)

不是谁都像你一样只向着前方就能活下去了,你就抛弃那些没用的同伴前行就好了,你注定是要成为海贼王的男人吧,而我就算没有远大的目标也可以.——<one piece> Block formatting context(以下简写为BFC)又称做块级格式化上下文,源自CSS2.1 规范中的Visual formatting model,Visual fomatting model定义了视觉媒体该怎样处理文档内容,BFC属于Normal flow(正常流),它与其他正常流元素并没有本质的区别,BF

BFC(块级格式化上下文)

定义:BFC(Block formatting context)为块级格式化上下文.它是一种环境,不会对周围其它盒子的布局产生影响,它只规定了内部如何布局. BFC布局规则 1.内部的Box会在垂直方向,一个接一个地放置. 2.Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也是如此. 4.BFC的区域不会与floa