BFC简单总结

最新推荐文章于 2022-09-04 15:22:26 发布

原创最新推荐文章于 2022-09-04 15:22:26 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #BFC #块格式化上下文

Web前端专栏收录该内容

12 篇文章

订阅专栏

本文探讨了BFC（块级格式化上下文）的概念及其如何影响页面布局中浮动元素的行为。通过创建BFC，可以避免浮动元素引起的布局问题，确保页面元素按预期显示。深入解析BFC内部浮动元素的管理机制，以及它如何与页面其他部分进行边界隔离。

如何产生BFC：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

参考：https://www.jianshu.com/p/0d713b32cd0d

1.BFC内部的浮动元素不会乱跑

2.和浮动元素产生边界

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

对于 BFC（块级格式化上下文）的一个简单的总结：

Wu hao's blog

05-30

174

概念 : BFC（Block Formatting Context）块级格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。形成条件：浮动元素，float 除 none 以外的值。定位元素，position (absolute,fixed)。 display 值为，inline-block，table-cell，table-caption，flex，inline-flex。 overflow 除了 visible 以外的..

BFC学习总结简单易懂

qq_43712187的博客

12-05

204

BFC

参与评论您还未登录，请先登录后发表或查看评论

BFC的简单总结

qq_45060976的博客

02-24

147

BFC BFC就是块级格式化上下文的英文翻译的简称，对于BFC来说它没有具体的解释，只可意会不可言传。怎样触发BFC：浮动元素，也就是float不是none 绝对定位元素行内块元素 overflow值不为visible的块元素弹性元素那么BFC能干嘛呢清楚浮动，虽然现在都是使用.clearfix 防止margin合并 ...

对BFC的总结

weixin_43601554的博客

06-12

408

什么是BFC？一、BFC的定义二、BFC的布局规则三、怎么创建BFC四、BFC的常见作用五、总结一、BFC的定义 BFC（Block Formatting Context）全称为块级格式化上下文。简单来说，BFC是一种属性，并且只会作用于Block-level box（块级元素）。设置了这种属性的元素会成为一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。二、BFC的布局规则属于同一个 BFC 的两个相邻 Box 垂直排列属于同一个 BFC 的两个相

BFC总结和使用

你好呀

01-29

245

BFC小结前言在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面：什么是BFC 如何生成BFC BFC的布局规则应用什么是BFC 首先看下什么是Formatting Context CSS2.1规范中的一个概念它是指页面中的一块...

BFC IFC 总结记录

weixin_33682719的博客

03-20

371

引用参考：https://segmentfault.com/a/1190000017273573?utm_medium=referral&utm_source=tuicool http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html BFC 定义 BFC(Block formatting context)直...

[总结]BFC

m0_64526818的博客

01-06

278

BFC

BFC的简单认知

qq_53101767的博客

10-26

139

在学习移动端开发时接触到了BFC的清除浮动，就翻了很多的BFC学习博客，试着自己总结了一些知识点。如有错误或还可拓展的，希望前辈们能指点一二，笔者还是初学者也请多担待哈。概念 BFC即Blocking Formatting Contexts(块级格式化上下文)，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。其中的Formatting context是W3C CSS2.1中的一个概念。通俗说BFC就是页面上一个单独的容器，它是一个独立的渲染区域

简单介绍BFC

Crystal412的博客

09-04

268

简单介绍BFC

关于盒子模型的BFC总结

weixin_33714884的博客

10-26

163

BFC全称是Block Formatting Context，中文意思为：块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。以下方式都会隐形创建一个BFC：设置float的值为left或right； position的值为absolute或fixed； display的值为flex，table； overflow的值为hidden或auto或scroll；...

BFC2000变频器说明书.pdf

06-30

根据提供的信息，我们可以总结出关于BFC2000系列通用型变频器的重要知识点。 ### 一、产品概述 BFC2000系列通用型变频器是由杭州邦瑞机电设备有限公司生产的一种高性能变频器。该变频器主要用于电机的速度控制，...

前端bfc的介绍与使用

02-23

关于BFC的介绍与使用这篇文章是我对BFC的理解及总结带你们了解bfc的布局规则，使用方法，触发条件等内容，理解简单。

css bfc

最新发布

05-04

这里由于第二个区块启用了 BFC，所以两者的顶部间距会保持实际相加后的距离而不是简单合并[^1]。 --- ### 总结掌握 BFC 不仅能帮助开发者更好地理解和调试复杂网页布局行为，还能有效应对诸如清除浮动、调整内外...

Nodejs配置cnpm

Good_zwn的博客

03-28

2379

1.配置npm全局模块的存放路径 a.在Node安装目录里（我是D盘）新建node_global和node_cache两个文件夹 b.改变npm配置：打开cmd输入一下命令 npm config set prefix "D:\ProgramFiles\nodejs\node_global" npm config set cache "D:\ProgramFiles\nodejs\n...

box-align与box-pack的使用

Good_zwn的博客

08-24

1039

参考： box-align：http://www.w3school.com.cn/cssref/pr_box-align.asp box-pack：http://www.w3school.com.cn/cssref/pr_box-pack.asp 注意：需要对齐的元素的父元素dispaly的值必须为box box-align值为center时，子元素为垂直居中 box-pack 属性规...

CSS字体图标

Good_zwn的博客

01-06

904

下载一个字体图标这里以阿里巴巴矢量图标库为例选择自己需要的图标，并添加入库下载代码下载到本地解压后文件内容如图所示将字体引入CSS文件 @font-face { font-family: "email"; src: url('./fonts/iconfont.eot'); src: url('./fonts/iconfon...

meta标签的属性

Good_zwn的博客

09-23

490

Array.sort()

Good_zwn的博客

08-13

430

参考：Array.sort | MDN sort()方法默认排序是全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示；增加了图片拖拽功能，你可以将本地的图片直接拖拽到编辑区域直接展示；全新的 KaTeX数学公式语法；增加了支持甘特图的mermaid语法1 功能；增加了多屏幕编辑 Markdown...

HTML元素垂直居中的方法

Good_zwn的博客

08-12

415

方法一条件：父元素为block或者inline-block并且高度不为min-height，子元素为inline或inline-block 使用一个元素撑开其父元素，并设置其vertical-align:middle，其它行内元素遍可垂直居中 HTML代码： <div id="root"> <div class="box">IFC</d...