3.BFC是什么?Margin 塌陷问题如何解决?怎么触发呢?

【高频考点精讲】BFC原理与应用:彻底搞懂浮动、清除浮动和margin重叠的解决方案 想象一下,BFC就是一个独立的小宇宙,里面的元素再怎么折腾,都不会影响到外面的世界。官方定义是:BFC是Web页面的可视化CSS渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。内部的盒子会在垂直方向上一个接一个地放置盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠每个元素的左外边缘(margin-left)会触碰到包含块的左边缘(对于从左往右的格式化,否则相反) 阅读详情

BFC的定义

BFC是一个独立的渲染区域,内部的布局规则不会影响外部元素,外部元素也不会影响BFC内部的布局。

margin塌陷问题

两个相邻div的上下边距(margin)会发生重叠,重叠后的边距值为两者中的较大值。例如,上方div的margin-bottom为100px,下方div的margin-top为100px,实际间隔为100px而非200px。

解决margin塌陷的方法

通过触发BFC(块级格式化上下文)可以避免外边距合并。以下为BFC的触发方式:

  • 设置float属性为left或right。
  • 设置position属性为absolute或fixed。
  • 设置display属性为inline-block。
  • 设置overflow属性为hidden、auto或scroll。
【CSS知识点】——解决高度塌陷以及BFC详解 高度塌陷以及BFC详解 阅读详情

相关推荐

【CSS】块格式化上下文(BFC):解决margin坍塌、高度塌陷、自适应布局等问题

这里写目录标题1、css 定位机制:2、 BFC解决什么问题:3、 怎么触发BFC:4、 BFC - margin重合:5、 BFC - margin塌陷:6、 BFC - 高度塌陷:7、 BFC - 自适应布局: 1、css 定位机制: css 中的定位机制可分为三种: 1. 普通的文档流:block 块级元素单独一行 (span),inline内联元素排成一排(div)。 2. 定位流:position 相当于新开一个层级。 absolute:绝对定位。从文档流中脱出,相对于其最接近的一个最有定位设置的

来都来了,不再学会儿? 435

解决margin塌陷的3种方法

初始HTML代码如下: <div class="father"> <div class="son">123</div> </div> 初始CSS代码如下: .father { width: 200px; height: 200px; margin: 10px auto; background-color: pink; } .son { width: 100px; height: 100px; background-color: purple

u010234868的专栏 528

Ansys Lumerical 启动时出现 Error: Could not connect to Ansys license server specified at 1055@ 的另一种解决办法

昨天在关闭了中之后 就能正常打开 FDTD 了,结果今天想开启出现了同样的报错:我猜测昨天能启动的原因在于关闭之后要重启电脑,并且在重启之后我第一时间打开 lumerical 测试因此端口没有被占用,今天是在电脑启动之后一段时间才打开所以又遇到了端口占用的问题。

qq_51404184的博客 9558

CSS3属性(四)

【代码】CSS3属性(四)

2301_80743842的博客 712

Ghidra逆向工具入门:从安装到实战分析baby.exe(附详细配置截图)

本文详细介绍了Ghidra逆向工具的安装配置与实战应用,通过破解CTF题目baby.exe的全过程展示其强大功能。从Java环境搭建到插件配置,再到反编译技巧与动态调试方法,帮助读者快速掌握这款免费开源的反编译神器,有效替代收费的IDA Pro工具。

weixin_29252171的博客 353

搜索引擎——ElasticSearch汇总

汇总——ElasticSearch篇 全文检索 问题1:什么是全文检索? 基本概念:对**非结构化数据/结构化数据**先建立**索引**,再对索引进行搜索**文档**的过程叫做全文检索。 什么是非结构化与结构化数据? - 非结构化数据:没有固定的格式的数据(html,word,excel)---没有固定长度,字段约束,描述,散列数据 - 结构化数据:有固定的格式的数据(如:数据库数据)---有固定长度(varchar(50)),字段类型,描述修饰数据 搜索算法:顺序扫描法、倒排索引法 - 顺序

alonewolf_99的博客 1840

面试准备:html/CSS

html CSS 文档流refer 什么是文档流 所有div 按顺序排列形成文档流,如果有一div脱离文档流,会导致补上的div被覆盖。 目前常见的会影响元素脱离文档流的css属性有: ①float浮动。 -> 中间建立一个新div {clear:both} ②position的absolute和fixed定位。 -> 建立一个新div3 代替div2 设置和div1高度一样,恢复和原来未改变的文档流 ...

yuki_bird的博客 148

WS2812呼吸灯效果实战:用STM32的PWM+DMA实现流畅渐变(附完整代码)

本文详细介绍了如何使用STM32的PWM+DMA技术实现WS2812呼吸灯效果,提供完整的代码示例和调试技巧。通过PWM波形编码和DMA传输机制,解决了传统IO模拟控制方式的高CPU占用问题,实现了流畅的LED渐变效果,适用于各种嵌入式开发场景。

weixin_30566063的博客 454

什么是BFC?如何触发?有何特点?如何解决“margin”塌陷问题?

BFC全称是“块级格式上下文”。它决定了元素如何对其它内容进行定位,BFC是一个完全独立的空间,是一种特殊渲染机制,内部元素的大小和布局不会受到外部的影响。块级元素独占一行 宽度高度由内容撑满垂直方向上依次摆放垂直方向的相邻块级元素,margin会合并父子关系下会产生margin的塌陷父子关系下,父元素无视浮动元素会产生高度坍塌兄弟关系下,正常元素会被浮动元素覆盖两个盒子模型content-box和border-box。

yjhuan的博客 1812

ABAP BOM展开避坑指南:CS_BOM_EXPL_MAT_V2函数参数配置详解

本文深入解析了SAP ABAP开发中用于物料清单展开的核心函数CS_BOM_EXPL_MAT_V2。针对其复杂的参数配置,如CAPID、STLAN、DATUV和MEHRS,提供了详细的避坑指南和最佳实践,帮助开发者避免数据错误与性能陷阱,实现高效、准确的BOM多层展开。

pea55的博客 856

37、基于视觉的轻量级面部呼吸和心率测量技术

本文提出了一种基于视觉的轻量级面部呼吸和心率测量技术,通过远程光电容积脉搏波描记法(RPPG)和面部振动信息实现非接触式生理信号采集。创新性地结合框选和特征点选择多个感兴趣区域(ROI),并采用光流跟踪、主成分分析(PCA)和集成经验模态分解(EEMD)等方法优化信号处理流程。实验结果表明,该方法在测量精度和稳定性方面优于传统方法,并可在树莓派4等低功耗平台上实现实时运行,具有广泛的应用前景。

r7s8t的博客 307

学习过CSS,那你知道BFC是什么吗?

BFC(Block Formatting Context):翻译成中文叫做块级格式化上下文,它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,其提供了一个环境,元素在这个环境中按照一定的规则进行布局排列 换句话说,BFC就是为元素提供一个独立的容器,在该容器里按照一定的规则进行布局排列,该容器内的元素不会影响外部的元素,同理,外部的元素也不会影响内部的元素

零一的博客 1万+

芯片原厂linux驱动开发的分享

大家好,我是XX,来自湖南XX学院,电子信息18级,也曾在创新基地控制组学习过两三年,毕业后就职于一家芯片原厂的解决方案部,担任驱动工程师的职位,算上实习期,我的工作时长已有两年。在此我想将这两年期间学习与积累到的一些经验输出出来,与大家一同分享。知识面有限,只能简单介绍一些驱动开发方向的一些经验,且由于经验尚浅,文中难免会有一些疏漏和错误之处,还请大家积极地批评指正。

嵌入式技术开发 849

有遇到过margin重叠/塌陷问题吗?BFC?

1、什么是margin重叠/塌陷? 2、开发中常见的margin塌陷 3、出现margin塌陷的原因 4、什么是BFC? 5、BFC的6个特性 6、BFC的功能总结 7、触发BFC的CSS属性 8、解决margin塌陷的办法 ① 对于父子元素 ② 对于兄弟元素

小草莓的博客 1641

Matlab R2018b简体中文版完整安装图文教程(附安装包下载)

目 录 一、安装过程 二、下载地址 matlab R2018b安装包如下所示,包括主程序和补丁文件两部分。 一、安装过程 双击安装包中的setup.exe。 选择使用文件安装MIYAO,点击下一步。 接受协议,选择是,点击下一步。 输入序列号:09806-07443-53955-64350-21751-41297,点击下一步。 修改安装路径,点击下...

智慧空间实验室 1万+

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

【CSS】什么是BFC?BFC有什么作用?

BFC(block formatting context)块级格式化上下文,他是页面中的一块渲染区域,并且有一套属于自己的渲染规则,BFC 是一个独立的布局环境,具有BFC特性的元素可以看作是隔离的独立容器,容器里面的元素不会在布局上影响到外面的元素。:只需要把两个div放置不同BFC中,那这两个BFC的内容将不会互相干扰,将两个di分别放置container容器中,然后通过overflow:hidden触发BFC;:这是因为给子元素添加了浮动,使它脱离了文档流;:红色方框覆盖蓝色方块;

m0_61049675的博客 6580

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

什么是BFC机制,如何触发BFC(消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷)

简单来说,BFC提供了一个独立的布局环境,BFC中的元素布局不受外部元素的影响,也不会影响到外部元素。触发BFC的几种方式1、给元素设置浮动 float: left | right2、给元素设置脱离文档流的定位 position: absolute | fixed3、给元素设置内容溢出 overflow: hidden | scroll |auto4、给元素设置 display: flex | inline-block | table-cell。几种常见问题:1、父级外边距折叠塌陷问题2、margi

qq_40261601的博客 2396

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

CSS 中的margin塌陷、合并、元素浮动的问题,以及使用BFC解决margin塌陷问题

解决网页设计时遇到的margin塌陷问题以及元素浮动带来的浮动流问题

AI_dkx的博客 496

CSS笔记 ( 八 ) margin 塌陷和边距重叠解决方案 (BFC)

本章介绍 margin 塌陷和边距重叠解决方案 (BFC)

leon9dragon的博客 1361

前端面试笔记4:BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)

BFC 文章目录BFC1. BFC 是什么?2. BFC 怎么触发?3. BFC 具体解决的问题margin 边距合并问题margin 塌陷问题高度塌陷问题 1. BFC 是什么? 首先要介绍一下关于文档流相关的知识。 文档流分为三个部分: 普通流; 定位流; 浮动流; 这三种流在布局的时候会相互影响,进而产生一些问题。 这些问题要通过一种统一的方式来解决,就是通过 BFC 的方式来解决。 BFC 即 block formatting context ,块级格式化上下文。上下文指的就是区域,实际上 BF

qq_52287721的博客 786

回流,重绘,margin塌陷,BFC

BFC 是浏览器排版中的一个“隔离区”。进入同一个 BFC 的块级盒子,会按从上到下的规则布局;而这个 BFC 与外部互不干扰:外部的浮动、margin 等不会“穿透”进来。

qq230663614的博客 569

详细解读margin塌陷/合并以及解决方案

CSS中的margin塌陷(外边距合并)是指垂直排列的元素间外边距会合并而非相加的现象,常见于相邻兄弟元素或父子元素之间。本文提供了8种解决方案:1)开启BFC特性(设置overflow、float、display为flex/grid或position属性);2)用padding替代margin;3)添加透明border;4)使用伪元素隔离。其中BFC是最推荐的现代解决方案,尤其flex/grid布局既能避免塌陷又便于控制对齐。每种方法各有利弊,开发者需根据实际场景选择最适合的方案。

前端工程师 · Vue 生态深耕者,专注多端与工程化 1250

CSS塌陷问题详解一:标准元素margin塌陷

CSS中的margin塌陷问题解析:当父子或相邻块级元素的垂直外边距相遇时,会合并为较大值。典型表现为子元素设置margin-top导致父元素整体下移,或相邻元素间距取最大值而非总和。解决方案包括:1)为父元素添加border/padding;2)触发BFC(如设置overflow:hidden);3)使子元素脱离文档流。对于兄弟元素,可通过插入BFC隔离元素、转为inline-block或使用padding替代margin来避免合并。该机制是CSS的默认排版优化,理解其原理可有效解决布局异常问题。

2203_76116789的博客 1246

两栏布局以及触发BFC规则margin塌陷

两栏布局:两个div一个固定宽高,另外一个自适应。 <div class="right"></div> <div class="left"></div> * { margin: 0; padding: 0; } .right { position: absolute; width: 100px; height: 100px; opacity: 0.3; right: 0;

苏先生前端 255

BFC规则以及如何触发

BFC是什么? 块级格式上下文,一个独立的渲染区域,BFC也可以看作是一种规则,触发了BFC规则的元素,就像是一个独立的容器,容器里面的元素不会在布局上影响外面的元素,就像被隔离了一样 BFC规则: 1、 ...

qq_45164496的博客 1186

css 基础捡漏(三) margin塌陷 margin合并 BFC 及相关解决办法

看下面的例子,你会发现father距上方100px,而child并没有离父元素上方100px.这就是margin塌陷 而father和mather间距也不是150px,而是100px,这就是margin合并 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

幼儿园老大的博客 364
上一篇: 2.登陆的几种类型
下一篇: 4.隐藏元素方法
develop_csdn_LGQ
博客等级 码龄10年 21粉丝 61原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值