块级格式化上下文
时间:2022-07-24
本文章向大家介绍块级格式化上下文,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
块级格式化上下文
BFC
块级格式化上下文Block Formatting Context
,是Web
页面的可视CSS
渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域,是用于布局块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境。
触发BFC
- 根元素
<html>
。 - 浮动元素,元素的
float
不是none
。 - 绝对定位元素,元素的
position
为absolute
或fixed
。 - 行内块元素,元素的
display
为inline-block
。 - 表格单元格,元素的
display
为table-cell
。 - 表格标题,元素的
display
为table-caption
。 - 匿名表格单元格元素,元素的
display
为table
、table-row
、table-row-group
、table-header-group
、table-footer-group
、inline-table
。 -
overflow
值不为visible
的块元素。 -
display
值为flow-root
的元素。 -
contain
值为layout
、content
或paint
的元素。 - 弹性元素,
display
为flex
或inline-flex
元素的直接子元素。 - 网格元素,
display
为grid
或inline-grid
元素的直接子元素。 - 多列容器,元素的
column-count
或column-width
不为auto
,包括column-count
为1
。
BFC应用
避免浮动溢出
<!DOCTYPE html>
<html>
<head>
<title>避免浮动溢出</title>
<style type="text/css">
.parent{
border: 1px solid #eee;
}
.child{
float: left;
width: 100px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<!-- 未使用BFC -->
<!-- 浮动元素超出父容器 -->
<div class="parent">
<div class="child"></div>
</div>
<!-- 清除浮动 示例分隔 -->
<div style="clear: both;height: 20px;"></div>
<!-- 使用 display: flex; 触发BFC -->
<!-- 浮动元素全部处于父容器中 -->
<div class="parent" style="display: flex;">
<div class="child"></div>
</div>
</body>
</html>
避免外边距合并
<!DOCTYPE html>
<html>
<head>
<title>避免外边距合并</title>
<style type="text/css">
.parent{
border: 1px solid #eee;
}
.child{
height: 100px;
width: 100px;
margin: 10px;
background-color: red;
}
</style>
</head>
<body>
<!-- 未使用BFC -->
<!-- 外边距合并 -->
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<!-- 示例分隔 -->
<div style="height: 20px;"></div>
<!-- 使用 display: flow-root; 触发BFC -->
<!-- 外边距独立计算 -->
<div class="parent" >
<div class="child"></div>
<div style="display: flow-root;">
<div class="child"></div>
</div>
</div>
</body>
</html>
避免浮动文字环绕
<!DOCTYPE html>
<html>
<head>
<title>避免浮动文字环绕</title>
<style type="text/css">
.parent{
border: 1px solid #eee;
}
.child{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 未使用BFC -->
<!-- 文字环绕于子元素 -->
<div class="parent">
<div class="child"></div>
<div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</div>
<!-- 清除浮动 示例分隔 -->
<div style="clear: both;height: 20px;"></div>
<!-- 使用 display: inline-block; 触发BFC -->
<!-- 文字不环绕于子元素 -->
<div class="parent" >
<div class="child"></div>
<div style="display: inline-block;">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</div>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/0d713b32cd0d
https://segmentfault.com/a/1190000009624181
https://segmentfault.com/a/1190000013514597
https://blog.csdn.net/qq_41257129/article/details/89641726
https://blog.csdn.net/sinat_36422236/article/details/88763187
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 通用封装函数——四则运算
- 打造自己最喜爱的 Windows10 —— 系统与软件配置优化篇
- 编译安装 IgBinary 扩展
- Python3入门学习二.md
- 编译安装 Yaml 扩展
- 一行代码不用写,就可以训练、测试、使用模型,这个star量1.5k的项目帮你做到
- 打造自己最喜爱的 Windows10 —— 纯命令安装系统篇
- Ubuntu18.04 切换 Python 版本
- Python3入门学习三.md
- Yur 主题 MarkDown 展示
- Python3入门学习一.md
- 前后端分离探索——MVC 项目升级的一个过渡方案
- Python3配置和入坑.md
- 别再被叫linux小白了,你跟linux高手只差这8个快捷键命令?
- CentOS7 手动部署 BBR