CSS:BFC(Block Formatting Context 块级格式化上下文)

简介: CSS:BFC(Block Formatting Context 块级格式化上下文)

一、背景

想要了解BFC的规则,必须是熟悉前端网页的多种布局手段,例如盒的显示模式display,三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。只有熟练掌握了这些布局方法之后,才能很好的理解BFC。

序号 名称 理解
1 普通流(normal) 1、元素按照其在HTML中的先后位置至上而下布局
2、行内元素水平排列,直到当前行被占满然后换行,块级元素则会被渲染为完整的一个新行
3、所有元素默认都是普通流
2 浮动流(float) 元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或向右边偏移
3 定位流(position) 元素会整体脱离普通流,因此决定定位元素不会对其兄弟元素造成影响

二、定义

BFC - Block Formatting Context 块级格式化上下文 BFC的定义,在官方文档到中,是这么介绍BFC的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

每一个BFC区域只包括其子元素,不包括其子元素的子元素。。

每一个BFC区域都是独立隔绝的,互不影响。

三、触发BFC的条件

并不是任意一个元素都可以被当做BFC,只有当这个元素满足以下任意一个条件的时候,这个元素才会被当做一个BFC。

触发BFC的条件
序号 条件 详细
1 body/html 根元素
2 浮动元素 元素float不是none
3 决定定位元素 元素的position为absolute或fixed
4 display display为inline-block、table-cell、table-caption、table、table-row、table-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-flex、gird、inline-gird
5 overflow overflow值不为visible、clip以外的值都可以
6 contain contain值为layout、content、paint的元素
7 多列容器 元素的column-count或column-width不为auto,包括column-count为1

四、利用BFC解决问题

在你明白了解BFC的触发规则之后,那么就需要利用BFC的特点来解决我们在布局中遇到的一些问题了,还记得我们之前说过,BFC有一个特点是:每一个BFC区域都是相互独立,互不影响的。

序号 BFC可以解决的问题
1 解决外边距的塌陷问题(垂直塌陷)
2 利用BFC解决包含塌陷
3 当浮动产生影响的时候,可以利用BFC来清除浮动的影响
4 BFC可以阻止标准流元素被浮动元素覆盖BFC阻止元素被浮动元素覆盖

五、欢迎交流指正

相关文章
|
2月前
|
XML JSON 前端开发
json字符串CSS格式化
完成以上步骤后,你便能在网页中看到格式化后的JSON数据,它们将按照CSS定义的样式进行展示,使数据更易于阅读和理解。通过有效地结合JSON和CSS,你可以创建出更加丰富且易于交互的网页内容。
178 64
|
2月前
|
XML JSON 前端开发
json字符串CSS格式化
json字符串CSS格式化
49 4
|
4月前
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
36 2
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
61 0
|
前端开发 容器
前端CSS理解 —— BFC(块级格式化上下文)
前端CSS理解 —— BFC(块级格式化上下文)
61 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
3天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
30 6
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!