块级格式化上下文(Block Formatting Context)
前言
在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一下。
普通流(Normal Flow)
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。
浮动 (Floats)
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
绝对定位 (Absolute Positioning)
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响(如果看了上文的童鞋,会发现这点与浮动元素会影响兄弟元素是不同的),而元素具体的位置由绝对定位的坐标决定。
一、什么是块格式化上下文
有了上面的知识后,就可以介绍Block formatting context (块格式化上下文)了。
Block Formatting Context (块格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse)。
二、触发BFC的条件
- the root element or something that contains it
- floats (elements where float is not none)
- absolutely positioned elements (elements where position is absolute or fixed)
- inline-blocks (elements with display: inline-block)
- table cells (elements with display: table-cell, which is the default for HTML table cells)
- table captions (elements with display: table-caption, which is the default for HTML table captions)
- elements where overflow has a value other than visible
- flex boxes (elements with display: flex or inline-flex)
翻译成中文大概有5点
1、"float"的值不是"none"
2、"overflow"的值不是"visible"
3、"display"的值是"table-cell"
4、"table-caption",或"inline-block"
5、"position"的值既不是"static"也不是"relative"
三、BFC的用处
1、Block Formatting Context可以阻止边距折叠(margin collapsing)。
例子:
<style>* { margin: 0;}body {width: 100px;}#one, #two {width: 100px;height: 100px;margin: 10px;}#one {background: red;}#two {background: blue;}</style>
<div id="one"></div> <div id="two"></div>
运行结果如下:
可以看见上下两个盒子的边距发生了折叠。
现在对#one和#two添加float:left属性后
运行结果如下:
此时上下两个盒子的边距未发生折叠。
2、Block Formatting Context可以包含内部元素的浮动。
例子:
<style type="text/css">* {margin: 0;padding: 0;}#red, #orange, #yellow, #green {width: 100px;height: 100px;float: left;}#red {background: red;}#orange { background: orange;}#yellow {background: yellow;}#green {background: green; }</style>
<div id="c1"><div id="red"></div><div id="orange"></div> </div> <div id="c2"><div id="yellow"></div><div id="green"></div> </div>
运行结果如下:
在上面的代码本意是做一个两行两列的布局,但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中,即便通过#c1, #c2这两个div划分,浮动之后它们还会一个接着一个排列,并不会换行。
现在对#c1和#c2同时添加float:left属性后,运行结果如下:
达成目标。
3、Block Formatting Context可以阻止元素被浮动覆盖
例子:
<!DOCTYPE html>
<html>
<head><title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#left {
width: 100px;
height: 100px;
background: red;
float: left;
}
#right {
height: 200px;
width: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
运行结果如下:
现对#right添加overflow:hidden属性后,运行结果如下:
四、总结
为了减少现代浏览器和IE(<8)之间的问题,编程人员可以给框(box)一个布局来创建新的块级格式化上下文。在这种情况下,流式相同的,元素也是通过相同的方式清除浮动,clear也是清除相同的浮动,外边距也像预期的那样叠加。同时,编程人员在通过触发hasLayout的方式来给框添加样式时必须留意因为这种添加样式的方法可能使那个元素变成新的块级格式化上下文。
转载于:https://www.cnblogs.com/p719027365/p/3903725.html
块级格式化上下文(Block Formatting Context)相关推荐
- 对 BFC 规范(块级格式化上下文:block formatting context)的理解?
相关知识点: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒 子的区域,也是浮动元素与其他元素的交互限定区域. ...
- 点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具 移动工具 移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具 快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具 放大镜工具可 ...
- 常规流之块级格式化上下文(Block Formatting Contexts)
在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框( ...
- Block Formatting Contexts(块级格式化上下文)
前几天看到kejun's blog里面的一篇文章:"近期面试感受", 里面提到面试时的一道题的不同的解决方案,比较它们之间的优缺点,其中出现了一个概念:Block Formatti ...
- CSS中块级格式化上下文(BFC)的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
- CSS进阶(2)- 块级格式化上下文
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录 块级格式化上下文 常规流块盒的布局的一些规则 BFC渲染区域 BFC的独立性 BFC的具体 ...
- 关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML.CSS的基本布局技能, ...
- 一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...
- BFC(块级格式化上下文)【面试】
BFC(块级格式化上下文) 块级格式化上下⽂,是⼀个独⽴的渲染区域,让处于 BFC 内部的元素与外部 的元素相互隔离,使内外元素的定位不会相互影响. IE下为 Layout ,可通过 zoom:1 触 ...
最新文章
- git中常用命令小结
- linux 脚本$字符,一文看懂shell脚本中$0 $1 $# $@ $* $? $$ 的各种符号意义
- Git GitHub Gitee GitLab
- 【WebRTC---入门篇】(五)Web服务器原理与Nodejs搭建
- 局域网ip扫描工具_Network Kit X for Mac(网络检测工具箱)
- c++课设作业之课程信息管理系统
- deepin linux字体设置,在deepin系统中如何安装系统字体? - Deepin深度系统用户手册...
- 学习编程语言的第一步,认识什么是计算机!!!
- Spring OAuth2 授权服务器配置详解
- 为了实现自动控制处理,需要计算机具有的基础条件是( ),计算机应用基础考试试卷(电大本科)...
- js判断是否是苹果浏览器
- java 动物声音 模拟器
- RTX操作系统教程[02]
- 前端人工智能?TensorFlow.js 学会游戏通关
- linux 安装 openvpn
- Java Integer128陷阱详解
- 库存管理系统(java)
- Java日期转换 SimpleDateFormat格式(年月日时分秒)
- ThinkPHP源码学习之I方法
- 如何优雅的抢红包 老司机给你传授秘技
热门文章
- C#读取Excel显示到repeater中
- 汇编语言的Hello World
- Linux - CentOS 6.3 (x86_64)安装过程详细图解
- ZZ:new/delete 和malloc/free 的区别
- 《当程序员的那些狗日日子》(十二)公司里的靓丽风景
- 多级树的深度优先遍历与广度优先遍历(Java实现)
- 简(kun)单(nan)到让我开(jue)心(wang)的后缀自动机全家桶(普通后缀、广义后缀、子序列)...
- python爬虫——web前端基础(1)
- 从nginx日志原始二进制数据还原文件
- java.lang.Enum