一个计算高度的小问题(bfc、margin-top BUG)

最新推荐文章于 2022-11-04 13:55:01 发布
最新推荐文章于 2022-11-04 13:55:01 发布
阅读量425 收藏 1
点赞数 4
CC 4.0 BY-SA版权
分类专栏： html、css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42043532/article/details/107038019
本文详细解析了CSS布局中常见的高度塌陷问题及解决方法，深入探讨了BFC(Block Formatting Context)的概念与应用，解释了浮动元素、margin重叠等现象背后的原因。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述
感觉挺简单的两道题，实际上考察了许多小知识点

第二题：0

containner下两个item都是浮动元素，而浮动元素是脱离文档流的，会造成父元素高度塌陷，也就是不会撑开父元素的高度，所以container高度为0；

第一题：30px

  • 首先，container设置border：1px；边框只设置粗细是无效的，必须指定边框的样式，才会出现边框，例：border：solid；
  • 其次，container是一个BFC，它里面两个相邻item的上下margin会发生重叠，所以两个item中间只有10px的像素
  • 第一个item的margin-top触发了BUG，实际作用在了container身上

还需要知道的其它知识点

  1. 只要有元素，html标签的宽度是自动撑满的，html的高度包括了上下边缘处子元素的上下外边距
  2. body标签默认自带8px的外边距,只要有元素，body的宽度也是自动撑满的，body的高度不包括上下边缘处子元素的上下外边距(body加入overflow: hidden;body的高度才会恢复)
  3. 未设置宽高的div与body标签一样，高度不包括上下边缘处子元素的上下外边距(div加入overflow: hidden;div的高度才会恢复)
  4. margin-top的一个bug：在父元素没有设置上边框(border-top)与上内边距(padding-top)并且子元素没有设置浮动属性(float)的时候，第一个子元素的上外边距(margin-top)会作用在父元素身上

关于BFC可以看这位老哥写的，链接在下
什么是BFC？看这一篇就够了

CSS篇-6
m0_60311269的博客
06-01 353
本文摘要：文章系统梳理了CSS核心概念与常见问题，涵盖单位特性（rem固定、vw/vh自适应）、格式化上下文（BFC/IFC/GFC/FFC）、伪类顺序（LoVeHAte）、布局问题（外边距折叠、空白符合并）和元素隐藏方式（display:none与visibility:hidden差异）。重点解析了透明效果实现（rgba局部透明 vs opacity全局继承）、响应式单位（em/rem/vw等）、兼容性处理（ResetCSS、怪异模式）以及FOUC避免策略（link优于@import）。同时详解了块级/行
几行代码解决京东购物界面
流楚丶格念的博客
07-10 9415
文章目录完整项目界面展示GIF界面代码index.htmlindex.css（中间主要部分）base.css（头部，尾部）normal.css图片资源 完整项目 https://download.youkuaiyun.com/download/weixin_45525272/12596801 界面展示 GIF 界面代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
关于CSS中BFC,浮动以及外边距塌陷的复习总结
太极梦龙的博客
11-17 341
1 BFC BFC(Block Formatting Context):块级格式化上下文,是web页面的可视化CSS渲染的一部分,是快盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域 块级格式化上下文的创建 根元素(<html>) 浮动元素(元素的float不为none) 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的...
CSS中BFC（还有margin-top和top）
yangyang的专栏
03-19 442
1.前置知识介绍 HTML中常用布局方式： 1.标准流 2.浮动布局 3.定位布局 4.弹性布局 块级元素：div、H1-H5、p、table、ol/ul/li 内联元素（可置换/不可置换）：a、span、img、input margin-top和top附注： top/right/bottom/left和margin-top/margin-right/margin-bottom/margin-le...
BFC以及margin的深入探究
weixin_30326745的博客
06-17 143
BFC(Block Formatting Context) 块级格式化上下文，它是指一个独立的块级渲染区域，只有block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 根元素,浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-block, table-cell, 和 table-caption），flex，inline-flex以...
BFC
庸人方自扰，自在就好
01-23 441
什么是BFC BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向
margin-top问题
weixin_43990624的博客
06-03 528
margin-top:expression(48-this.height/2) margin-top:expression(48减去获取到的当前高度的一半);意思是距离顶部的外边距用48减去当前层的实际高度的一半作为顶部边距，宽度不超过48；高度不超过48，是IE6之前的表达式，FF不支持，也就是相当于max-width； max-height一样的效果；一般用在图片中 ...
CSS练习题（居中五环 | 两栏布局 | 两个经典bug | BFC | 浮动元素）
m0_53222768的博客
12-14 1765
一、居中五环（html+css） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="demo.css"/> </head> <body> <div class="
HTML CSS零基础入学宝典：实例：居中五环,两栏布局,两个常见bug,BFC
# 1.... ... ...通过使用标签和属性，可以创建出整个网页的结构。... ...它们通常成对出现，包括...- **HTML元素**：指的是从开始标签到结束标签的所有代码，比如`这是一个段落</p>`中的`这是一个段落</p>`就是一个HTML元素。 - **HTM
margin塌陷 margin合并 二者详解
weixin_44915226的博客
08-20 284
首先说一下margin塌陷 1.我们使父级的margin-top为50px时，父级便会距离上面50px。 2.当我们使子盒子的margin-top也为50px时，我们发现子盒子没有距离父级的上边50px，而是纹丝不动。 3.当我们给子盒子设置margin-top为100px时,我们会惊奇的发现，子盒子带着父盒子一起向下移动了100px。 上述出现的问题便是margin塌陷：父盒子与子盒子ma...
DIV内部的最后一个元素的margin-bottom不算高度
sd2131512的专栏
06-26 2904
今天在做项目的时候遇到的一个问题，暂时还没有解释的清 一个父元素的div，高度没有设定(就是auto嘛)，那么他的高度应该是由里面的元素高度之和决定。 我们在里面放入了多个块级元素，且没有用到浮动和定位，就是这么挨个堆下来。 最后用jQuery.outHeight获取父级元素高度时，发现DIV内部的最后一个元素的margin-bottom的高度没有被算进来  所
【前端】子元素加margin，父元素div高度计算错误--margin越界
michiko98的博客
11-04 809
css margin越界 父子元素
对BFC的总结
weixin_43601554的博客
06-12 396
什么是BFC？一、BFC的定义二、BFC的布局规则三、怎么创建BFC四、BFC的常见作用五、总结 一、BFC的定义 BFC（Block Formatting Context）全称为块级格式化上下文。简单来说，BFC是一种属性，并且只会作用于Block-level box（块级元素）。设置了这种属性的元素会成为一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 二、BFC的布局规则 属于同一个 BFC 的两个相邻 Box 垂直排列 属于同一个 BFC 的两个相
代码设置margin_css 高度计算你真的会了?!(关于margin)
weixin_42362068的博客
01-12 716
今天看博客,看到一个小伙伴面试字节时的一个问题.问题:父元素container的高度为多少?(代码如下)<div class="container"> <div class="inner"/> <div class="inner"/> </div> .container { border: 1px; } .i...
CSS之BFC浅析
Bennett_G博客
02-14 519
CSS之BFC浅析前言一、BFC是什么？二、产生BFC的条件三、BFC的约束规则结语 前言 无意间看到一个web前端面试场景，面试官询问你了解BFC吗？ 此时我懵了，转职前端也一年有余了，BFC第一次听说，真是羞愧呀???????????? 所以本着知耻而后学的????，特意去查找了一番资料，学习学习???????????? 提示：以下是本篇文章正文内容，仅供大学一起参考学习 一、BFC是什么？ BFC (Block Formatting Context):块格式化上下文，是用于布局块级盒子的一块独
BFC详解
DGL_优快云的博客
08-30 394
1 BFC BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）⼀个块级上下文。 BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响 可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题 可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可 1.1 BFC布局规则 内部的块级元素会在垂直方向，⼀个接⼀个地放置 块级元素垂
什么是BFC? 怎么应用？
weixin_43758377的博客
10-27 650
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定
面试积累——BFC
Daisy花园
04-12 1696
什么是BFCBFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。BFC有一下特性： 内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个B
高度坍塌问题--BFC模式解析
xiaowei的博客
11-10 3348
问题引起是2016IFE春季问题的任务三，总的父元素parent包含三个浮动的子元素，容器的高度不能自动伸长以适应内容的高度，出现了高度坍塌问题。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高度坍塌问题-BFC模式解析</title> <style> .parent
margin-top不要影响兄弟元素
最新发布
03-08
用户可能遇到了布局上的问题，比如设置了一个元素的margin-top，但发现上面的兄弟元素并没有被推开，或者产生了意外的折叠现象。 接下来，我需要回忆CSS的盒模型和外边距合并（margin collapsing）的规则。根据W3C...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值