CSS BFC 块格式化上下文

最新推荐文章于 2024-10-30 17:45:09 发布
最新推荐文章于 2024-10-30 17:45:09 发布
阅读量87 收藏
点赞数 1
分类专栏： CSS 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64522330/article/details/124534421
版权
BFC（Block Formatting Context）是Web页面CSS渲染的重要部分，定义了块级元素如何布局以及与浮动元素交互。创建BFC的方法包括：HTML根元素、浮动元素、行内块元素及overflow不为visible的元素。BFC特性包括包裹内部元素并清除浮动，同时避免margin塌陷。BFC常用于解决布局问题，如清除浮动和消除margin塌陷。
摘要由CSDN通过智能技术生成

 BFC    块格式化上下文

是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素的交互区域

创建BFC 方法: 1. html标签是BFC盒子

                         2. 浮动元素是BFC盒子

                         3. 行内块元素是BFC盒子

                         4. overflow属性取值不为visible，如：auto,hidden...

BFC  盒子特点： BFC盒子会默认包裹住内部子元素（标准流，浮动）  应用：清除浮动

                  BFC盒子本身与子元素之间不存在margin 的塌陷现象     应用：解决margin 塌陷现象

Wu-wenhao
关注
专栏目录
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
CSS布局基础BFC
01-21
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
浅析CSS里的BFC和IFC的用法
09-24
理解这两种格式化上下文对于解决CSS布局中的一些问题至关重要。 首先，BFC是CSS布局的一个部分，用于决定块级盒子如何布局以及块级元素如何相互作用。在BFC中，垂直方向的相邻盒子会按照一定规则来摆放，比如它们的...
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1435
【代码】炫酷的登录框!(附源码)
CSS_定位_网页布局总结_元素的显示与隐藏
2301_80636070的博客
10-27 851
目录目标1. 定位1.1 为什么需要定位1.2 定位组成1. 定位模式2. 边偏移1.3 静态定位 static（了解）1.4 相对定位 relative（重要）1.5 绝对定位 absolute（重要）1.6 子绝父相的由来（重要）1.7 固定定位 fixed （重要）1.8 粘性定位 sticky（了解）1.9 定位的总结1.10 定位叠放次序 z-index1.11 定位的拓展1. 绝对定位的盒子居中2. 定位特殊特性3. 脱标的盒子不会触发外边距塌陷4. 绝对定位（固定定位）会完全压住盒子2. 综合
CSS浮雕效果
最新发布
p_s_p的博客
10-30 210
【代码】CSS浮雕效果。
css 元素高度从0过度到auto的两种方案
qq_31683775的博客
10-30 166
1.使用display: grid;和 grid-template-rows: 0fr;2.使用vue的 <transition>
第七章 利用css和多媒体美化页面
2301_80634189的博客
10-29 849
a></a>标签始终定义超链接，<a>元素最重要的属性是href属性，它指示链接的目标，如果未设置此属性，后续多个属性均无法使用。
第七章利用css和多媒体演化页面的习题
2401_86933352的博客
10-27 474
【代码】第七章利用css和多媒体演化页面的习题。
CSS特性
k_k_kkh的博客
10-27 700
②公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!规则：①从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较；：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。②不同的属性会叠加：不同的CSS属性都会生效。特点：①相同的属性会覆盖：后面的CSS属性覆盖前面CSS属性；（行内样式 ，id选择器个数，类选择器个数，标签选择器个数）：代码的简写方式，输入缩写VScode会自动生成对应的代码。注：如果标签自己有样式则生效自己的样式，不继承。
css 对称按钮，中间斜平行间隔，两头半圆
随风潜入夜，不白头
10-26 527
后面将其他的UI做了七七八八后，到这个按钮的时候，不知怎么，突然卡机了，想不起来怎么实现了，按正常按钮来直接一个div套两个div加点样式就完事了，可这货还有一层；啊，这个，我是为了凑些字数的，知道就不写这么详细了，反正也没人看，都是自我记录，我看的懂就行，题目应该写骚包的按钮样式，下次就应该这么干；本来是在小程序上实现的，现在放到html里，在HTML上有一个小bug，2px的边框没有很好的重合，也就懒的去调了。不行，写得多了会长脑子的，让本就不聪明的脑子就更聪明，变成了机灵鬼了，看你怎么办；
CSS网格布局
weixin_74261199的博客
10-30 270
希望元素按照网格的方式进行布局，最简单的方式就是利用网格布局。
模块化CSS
KEEP CODING
10-26 704
模块化CSS是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且相互之间没有依赖关系，当修改其中一部分CSS时，不会对其他部分产生意料之外的影响。
HTML 与 CSS 演绎敲击键盘的灵动之手
weixin_52814911的博客
10-25 1246
这段 HTML 代码定义了一个父容器 div 元素，其类名为 “🤚”，在这个父容器内包含了五个类名为 “👉” 的子元素和两个分别类名为 “🌴” 和 “👍” 的子元素。这段代码是一个HTML和CSS的组合，用来创建一个动画效果，模拟一只手在敲击键盘的动作。
浮动+flex布局
YY0503_的博客
10-26 1193
*{margin: 0;padding: 0;.product{.left{.right{.box{
SCSS在Vue中切换主题颜色示例（mixin + scss方式，简单高效）
陈二狗的博客
10-30 312
SCSS在Vue中切换主题颜色示例（mixin + scss方式，简单高效）
通过js控制修改css变量
游九尘的博客
10-26 294
在JavaScript中，你可以通过操作CSS变量（也称为自定义属性）来动态改变样式。CSS变量在CSS中使用 – 前缀定义，例如 --main-color: red;。在JavaScript中，你可以使用 document.documentElement.style.setProperty 方法来设置这些变量，或者使用元素的 style.setProperty 方法（如果变量是在某个特定元素上定义的）。
css-元素居中方式
m0_73882020的博客
10-27 255
Flexbox 是一种现代的布局方法，可以轻松实现居中。绝对定位也可以用来实现居中，但需要设置父元素为相对定位。CSS Grid 也是一种强大的布局工具，适合居中。来实现水平居中，配合设置高度实现垂直居中。根据具体情况选择适合的居中方法。如果内容是单行文本，可以利用。对于块级元素，可以使用。
深入理解CSS布局与块级格式上下文（BFC）
在Grid布局中，每一格都有自己的格式化上下文，称为Grid formatting context (GFC)，而在Flex布局中，我们有Flex formatting context (FFC)。这些新的布局模型进一步扩展了BFC的概念，为开发者提供了更多控制页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wu-wenhao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值