BFC外边距穿透具体 是神马玩意儿

最新推荐文章于 2022-06-13 21:34:11 发布
最新推荐文章于 2022-06-13 21:34:11 发布
阅读量218 收藏 1
点赞数 1
分类专栏： 全栈工程师 前端开发 css 文章标签： web工程师 web前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43287934/article/details/82858213
版权 
                     BFC外边距穿透具体 是神马玩意儿
   既然我们提到了BFC，那么首先我们就应该知道BFC是神马玩意儿，那这个BFC到底是啥呢，所谓的BFC它就是平常我们写block和inline的标准文档流。
   其实他就是我们平常的块级元素自顶向下排列，同级之间的containing block顶部一个接一个垂直排列，水平方向上撑满宽度。因为两个相邻的BFC之间距离由margin决定，在同一个BFC内部，两个垂直方向相邻的块级元素margin值会"共用"，导致塌陷。也是经典的外边距塌陷问题。这也就BFC外边距穿透。

  那么如何解决这个问题，其实很简单，只需要通过对父容器添加overflow:hidden，改变它的BFC，这样处于同样的BFC下的容器就会将子div内容算入，撑开父容器。

初次发表多多见谅。。

前端小李
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习
艾编程带你学前端博客
12-07 368
前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。可以尝试动手试一试，有什么疑问 ！可随时交流，有问必答 。margin 纵向重叠（合并）问题元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。 答案： item1与item4之间间距为 20px解析：因为中间两个box中没有内容也没有边框线，
BFC外边距穿透的理解
weixin_43288210的博客
09-26 541
一、何为BFC 首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为 BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个 BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 二、B...
浅谈BFC外边距穿透问题
qq_43288315的博客
09-26 686
前言：关于边距问题，有很多小白有许多误解，当然秧子也有！不过不要因为害怕不去触碰这些，这种行为是不理智的！！！ 一，什么是BFC? 　BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我...
BFC外边距穿透
qq_43288085的博客
09-26 206
BFC外边距穿透 看到BFC的时候，我也是很懵的，这是一个新鲜词。 1、首先什么是BFC呢？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化） Context（上下文）==块级格式化上下文 的概念。 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-leve
BFC外边距穿透分析
qq_41621512的博客
09-26 214
  1.什么是BFC？ BFC（Block Formatting Context）：块级格式化上下文。可以把它理解成一个独立的区域。只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 Block-level Box： 块级盒block-level box是这种参与了块级排版上下文的一种盒子，每个块级元素都生成了一个包...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...
10分钟理解CSS BFC原理及其应用
09-27
1. **外边距折叠（Margin Collapsing）**：在同一个BFC中，相邻的垂直外边距会合并。例如，两个在同一BFC下的div元素，它们之间的外边距只会显示为两者中较大的那个。要避免这种情况，可以将它们置于不同的BFC中，如...
zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1
07-25
字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo
BFC实现自适应两栏布局
01-20
- **防止外边距折叠**：BFC内的块级元素之间的外边距不会相互合并，从而避免了元素间距异常的问题。 - **区域不与浮动元素重叠**：BFC的区域不会与浮动元素发生重叠，可以有效地防止内容被浮动元素覆盖。 - **计算...
关于BFC外边距穿透问题
qq_43060624的博客
09-26 304
什么是BFC？ BFC（Block Fromatting Context）：块级格式化上下文。它理解成一个独立的区域，此区域里面的子元素不会影响到外面的元素。反之也如此。 w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级...
前端学习day006：浮动，清浮动，隐藏显示，外边距穿透，行元素之间的间距问题
qq_45926448的博客
06-13 123
浮动，清浮动，隐藏显示，外边距穿透，行元素之间的间距问题
BFC概念与解决外边距穿透问题
MARVEL的博客
09-26 287
什么是BFC? BFC（Block Formatting Content）：块级格式化上下文,是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。可以把BFC看做一个盒子，盒子内部的元素与外部元素布局上互不影响。 （我也只是在网上搜索了一些资料，做了一点整理），BFC常见的应用场景： 1.垂直外边距合并问题 main{ width: 1000px; ...
实训h5-页边距穿透和合并问题
_C9的博客
06-27 218
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ /*margin常用在处理默认的外边距问题*/ margin:0; padding:0; } .box{ height:100px; width:100px; background-co.
css中div属性及类型
qq_52648305的博客
04-12 1915
文档流 首先谈一下文档流: 浏览器会根据 元素的排列方式 块元素 从上到下排列行元素和行内块 从左到右排列 如果空间不足 自动换行我们称为流式布局 有了文档流,我们知道了div标签属于标准的块元素,而盒模型又分为标准盒模型和怪异盒模型 盒模型 1.标准盒模型 盒模型(box moldel),是w3c规定一个浏览器如何渲染,显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型 盒子组成 = content+padding+border+margin 补充:父盒子宽高设置,子盒子未设置宽高时子盒
零基础CSS入门教程(15)–外边距
程序员大阳
10-29 2122
点此查看全部文字教程、视频教程、源代码 本文目录1. 前言2. 默认情况3. 设置外边距4. 简写属性5. 小结 1. 前言 要理解外边距，先来说一下外边。 物体的外边，指的就是外围的边界，对网页元素来说，外边就是元素最外面的边界。 那么外边距，就是一个物体的外边，与另一个物体的外边的距离。 CSS之中，通过margin来设定元素的外边距，本篇就来说明下用法。 2. 默认情况 先看代码： <body> <input type="button" value="按钮1">
CSS系列之外边距 margin
老__L的博客
01-30 7212
本文主要介绍CSS的margin、margin-bottom、margin-left、margin-right、margin-top属性。外边距就是盒子与盒子之间的距离。
前端面试题专题（一）
祈澈菇凉
02-23 440
一、谈谈你对 Web 标准以及 W3C 的理解和认识。参考解答：标签小写、闭合、具有语义化外链CSS和JS脚本结构、样式、行为分离代码精简，组件化开发代码易维护，可复用二、CSS有哪些基本...
CSS 外边距(margin)重叠及防止方法
前端岚枫
12-08 3551
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例
css穿透（带案例详解）
浮游的博客
08-19 3912
问题背景 在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式，以做到不污染全局样式。通过在样式标签上使用scoped，达到样式只作用到本页面的目的，但是此时再修改组件样式就不起作用了。 <div class="text-box" v-html="emotion(item.content)"></div> <style lang="stylus" scoped> .text-box{ color: #2e3135;
css中的BFC是什么
最新发布
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值