深入了解CSS中的BFC

已于 2022-09-04 11:28:21 修改
阅读量102 收藏
点赞数
分类专栏： HTML+CSS 文章标签： css 前端 html BFC
于 2022-08-08 13:46:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OnTheRoad_ING/article/details/126225692
版权

深入了解BFC

  • 首先了解FC（formatting context）
    • 格式上下文
分为 BFC 和IFC
  • BFC（block formatting context）
    • 块级格式上下文

在这里插入图片描述

  • IFC （inline formatting context）
    • 行内级格式上下文

在这里插入图片描述

可以出发BFC的情况

在这里插入图片描述

触发BFC可以做什么

解决高度塌陷

在这里插入图片描述

  • 包裹元素高度塌陷
  • 要么清除浮动解决
  • 要么触发bfc解决 这里采用bfc

在这里插入图片描述
在这里插入图片描述

解决margin折叠

在这里插入图片描述

  • 解决办法 触发BFC，使得俩个红色box处于不同的BFC环境下

在这里插入图片描述
在这里插入图片描述

  • 不过此时虽然可以解决高度塌陷，但是不建议使用margin，可以设置父元素的padding来增加距离
OnTheRoad_ING
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入了解CSS
m0_64036990的博客
12-08 511
CSS 主要内容 简介 CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优
CSS-全面理解BFC
weixin_46245467的博客
02-20 62
全面理解BFC 1. 常见的定位方案 普通流 - 元素按照它在HTML中的先后位置自上而下布局 - 行内元素水平排列，直到当行被渲染完成后换行，块级元素自己独占一行 - 所有的元素默认都是普通流定位的 浮动 - 元素首先按照普通流位置出现，然后尽可能的向左或者向右偏移 绝对定位 - 元素整体脱离普通流，绝对定位元素不会对兄弟元素造成影响 2. BFC定义 BFC(Block formatting context) 块级格式化上下文，独立的渲染区域有着自己的渲染规则，与这个区域外部
10分钟理解CSS BFC原理及其应用
09-27
1. **外边距折叠（Margin Collapsing）**：在同一个BFC中，相邻的垂直外边距会合并。例如，两个在同一BFC下的div元素，它们之间的外边距只会显示为两者中较大的那个。要避免这种情况，可以将它们置于不同的BFC中，如...
深入理解和应用css中Float属性
09-24
CSS中的`float`属性是一个关键的布局工具，它允许元素脱离标准文档流并影响周围内容的布局。本文将深入探讨`float`...尽管如此，理解`float`的工作原理对于解决老代码库的问题和理解CSS布局历史仍然是非常有价值的。
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。本文将详细解释这三个方面。 1. **隐藏溢出** 当元素的内容超出了其指定的...
细说CSS中margin属性的使用
09-24
当两个垂直相邻的块级元素在同一BFC中，它们的`margin`可能会被折叠成一个更大的值。例如，如果元素`#a`的`margin-bottom`是10px，而元素`#b`的`margin-top`是20px，那么这两个`margin`会折叠成20px，确保元素之间...
深入解析IE浏览器专有的CSS属性hasLayout
12-13
hasLayout 与 BFC 有很多相似之处，但 hasLayout 的概念会更容易理解。在 Internet Explorer 中，元素使用“布局”概念来控制尺寸和定位，分为拥有布局和没有布局两种情况，拥有布局的元素由它控制本身及其子元素的...
CSS前端面试题——CSS 中，有哪些方式可以隐藏页面元素？有什么区别?
lbcbjtlhmjq的博客
07-25 396
这些方式的区别在于是否占据空间和是否可见，开发者可以根据实际情况选择不同的方式来隐藏页面元素。
2024年软件系统与信息处理国际会议（ICSSIP 2024）即将召开！
2301_78601484的博客
07-25 730
2024年软件系统与信息处理国际会议（ICSSIP 2024）将于2024年10月25-27日在中国昆明举行。引领技术前沿，共谋创新未来。ICSSIP 2024将汇聚来自世界各地的专家学者，他们将在会上分享最新的研究成果、技术突破及实践经验。会议议题涵盖了软件工程、人工智能、大数据处理、云计算等多个前沿领域，旨在为与会者提供丰富的学术交流和思想碰撞的机会。
【CSS】响应式设计
小秀的博客
07-24 475
响应式设计是指通过⼀些技术⼿段，使得⽹站或应⽤在不同终端设备（如桌⾯电脑、平板电脑、⼿机等）上能够⾃适应地呈现最佳的⽤户体验。⼀种实现⽅式是使⽤等技术，以便根据设备屏幕的宽度和⾼度等信息⾃适应地调整⻚⾯的布局和元素的⼤⼩。另⼀种实现⽅式是使⽤，根据设备的屏幕尺⼨和分辨率等信息，加载不同的样式⽂件或应⽤不同的样式规则，以便实现不同场景下的最佳效果。
常见的CSS属性（一）——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值
weixin_64294248的博客
07-25 1219
元素的继承性是指给父元素设置了某些属性，子元素或后代元素也会有作用。
Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-20 1088
本文主要记录图片九宫格与非九宫格展示效果动态切换的实现过程；
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 817
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1014
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 601
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 282
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 234
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
通过不同方式在 Vue 3 中传递路由参数
点点滴滴
07-25 631
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
基于上云api前端开发经验教训(loading...)
最新发布
IIIIIAN
07-26 403
对于上云api开发学习过程中的错误教训积累总结
深入理解CSS BFC与层叠原理，掌握!important的应用
前端知识CSS原理深入解析 前端开发是Web开发的重要组成部分，其中CSS（层叠样式表）扮演着至关重要的角色。CSS原理涉及多个核心概念，包括块级格式化上下文(BFC)、层叠顺序和继承规则，以及使用!important声明的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值