CSS中BFC（还有margin-top和top）

最新推荐文章于 2023-02-27 01:18:52 发布
最新推荐文章于 2023-02-27 01:18:52 发布
阅读量386 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014465934/article/details/88666355
版权
本文介绍了CSS中的布局方式，包括标准流、浮动布局、定位布局和弹性布局。重点讨论了BFC（Block Formatting Context）的概念，它是CSS布局中的一种重要机制，用于理解元素定位和外边距重叠。BFC可以通过特定条件触发，如根元素、浮动、overflow值等。同时，BFC在解决浮动元素高度塌陷和防止元素被覆盖等问题上起到关键作用。
摘要由CSDN通过智能技术生成

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-left都可以用在relative/absolute中，但是relative一般用margin-top/margin-right/margin-bottom/margin-left，absolute一般用top/right/bottom/left（absolute中使用margin-top是一种特殊的“相对定位”），两者的区别，可以通过查看盒模型知道。

还有一条：
1.使用top、bottom、left、right的前提是本元素position被定义为relative、absolute和fixed中的一种，不能是static
2.使用margin-top、margin-bottom、margin-left、margin-right的元素的position可以是static、relative、absolute和fixed
3.relative下right和bottom是从right/bootom方向偏移，比如

position: relative;
background: blue;
width: 100px;
height: 100px;
right: 50px;
bottom: 50px;

是从right/bottom方向偏移50px࿰

最低0.47元/天 解锁文章
Cacra
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS】块格式化上下文（BFC）：解决margin坍塌、高度塌陷、自适应布局等问题
来都来了，不再学会儿？
10-17 289
这里写目录标题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：绝对定位。从文档流中脱出，相对于其最接近的一个最有定位设置的
一分钟掌握CSS之BFC，margin塌陷
m0_46358229的博客
04-02 143
一分钟入门并掌握CSS之BFC，margin塌陷 大家好，我是YoursJoker，想要走出大山的一个小菜鸟，今天将用简单易懂的语言，让大家快速了解和掌握CSS中的BFC和margin塌陷（本人新手一枚，各位大佬们多多包涵） 何为BFC BFC就是块级格式化上下文block formatting context BFC特性： BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的...
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
Just Code
08-01 485
BFC的理解与应用 首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。   什么是BFC（Block formatting contexts） w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks...
从margin-top失效看BFC
Shaft_的博客
08-01 635
情景 在前端开发过程中，我们通常会遇到这样的问题，我们给一个紧邻父元素的div Box设置一个margin值后，发现该值对内部的div Box 没起作用，反而是作用在了父级元素上。 示例代码： <div class="outBox"> <div class="innerBox"> </
BFC以及margin的深入探究
weixin_30326745的博客
06-17 110
BFC(Block Formatting Context) 块级格式化上下文，它是指一个独立的块级渲染区域，只有block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 根元素,浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-block, table-cell, 和 table-caption），flex，inline-flex以...
clear:both后margin-top不起作用其他左右下都起作用
09-25
在BFC中，元素的顶部外边距不会与其包含块或者浮动元素的底部外边距发生合并，这就是为什么`margin-top`看起来没有影响到第二个`div`的垂直位置。相反，`margin-bottom`和`margin-right`依然按照常规方式起作用，...
解决CCS中的margin：top塌陷问题
11-21
总的来说，理解并掌握margin塌陷和BFC是CSS布局中至关重要的一环，它们可以帮助开发者解决很多复杂的布局问题。通过创建BFC，我们可以确保元素的外边距正确地应用于自身，而不会与父元素的边距混淆，从而达到预期的...
细说CSS中margin属性的使用
09-24
在某些特定情况下，即使元素没有生成BFC（块格式化上下文）、没有包含正常流的子元素、`min-height`为0、`height`为0或`auto`，其`top`和`bottom margin`也会被视为垂直毗连。 `margin`折叠是CSS布局中的另一个关键...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有...在实际开发中，合理利用BFC特性可以避免很多CSS布局上的问题，提升页面性能和用户体验。
CSS3之边框多颜色Border-color属性使用示例
12-08
虽然这些属性在某些浏览器中的兼容性还有待提升，但随着CSS规范的不断更新和完善，我们有望在未来看到更多的浏览器原生支持这一特性。在实际开发中，应结合使用兼容性测试工具和优雅降级策略，确保所有用户都能获得...
CSS 外边距(margin)重叠及防止方法-----------------边距重叠解决方案(BFC)
Calmlyx的博客
11-25 264
边距重叠解决方案(BFC) BFC： 其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文” 问题描述： 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 ...
CSS中的BFC 与 margin塌陷
hao_sir
03-15 169
一、CSS中的BFC 　　BFC ： 直译为“块级格式化上下文”。他是一个独立的渲染区域，只有Block-level Box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　　BFC布局规则： 　　　　1.内部的Box会在垂直方向，一个接一个地放置。 　　　　2.BFC的区域不会与float box重叠 　　　　3.内部的Box垂直方向的距...
css中的四种定位以及top和margin-top的区别
ygh5123687的博客
01-13 482
css中一共有四种定位分别是默认，相对，绝对，固定 position：static，这种定位是默认的，一般没什么实际的作用。 position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置 position：absolute，绝对定位，这种定位脱离文档流，可以...
BFC是什么
马骏超的博客
01-17 310
BFC是什么 BFC(Block formatting context)直译为"块级格式上下文"。它表示一个独立的渲染区域，只有块级元素(Block-level)参与其中，它有一套渲染规则，这套规则决定了内部的块级元素如何布局，并且这个区域与外部完全隔绝。 BFC布局规则 内部的Box会在垂直方向，一个接一个的放置 Box的垂直方向的距离由margin决定,并且属于同一个BFC中的两个相邻的Bo...
一个计算高度的小问题(bfc、margin-top BUG)
weixin_42043532的博客
06-30 367
感觉挺简单的两道题，实际上考察了许多小知识点 第二题：0 containner下两个item都是浮动元素，而浮动元素是脱离文档流的，会造成父元素高度塌陷，也就是不会撑开父元素的高度，所以container高度为0； 第一题：30px 首先，container设置border：1px；边框只设置粗细是无效的，必须指定边框的样式，才会出现边框，例：border：solid； 其次，container是一个BFC，它里面两个相邻item的上下margin会发生重叠，所以两个item中间只有10px的像素 第一.
关于父元素和子元素的margin-top问题
weixin_30618985的博客
06-07 75
昨天试着自己写个web简历，碰到的第一个问题竟然是margin-top的疑问，下面是经过百度后的一些理解和记录，仅作自我学习之用。 hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 <div class="box1"> <div class=...
css中BFC总结
ssjjrr的博客
10-01 163
css BFC
Margin折叠与BFC
m0_61696809的博客
02-27 666
​ 具体来说，如果兄弟元素A的margin-bottom与兄弟元素B的margin-top相遇，则它们的margin值将合并为一个较大的margin值。例如，如果兄弟元素A的margin-bottom为30px，而兄弟元素B的margin-top为20px，则合并后的margin值将为30px。​ BFC（Block Formatting Context）是 CSS 中的一种渲染模式，它是一个独立的渲染区域，具有一定的隔离性，可以让处于 BFC 内部的元素避免影响到外部元素的布局和样式。
理解BFC——Margin重叠
sinat_41871344的博客
08-27 1702
什么是BFC BFC（Block Formatting Context）直译为“块级格式化范围 ”。 w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 在BFC...
ul.head{ border-style: groove; position: fixed; top:0; width:99%; list-style-type: none; margin-top:0; padding-left: 0px; /*创建一个新的BFC*/ overflow: hidden; background:indianred; border-radius:8px;/*圆角边框*/ font-size:18px; } li a{ /* !*实现横向导航栏, display:inline;也可，如果你想链接到具有相同的大小，你必须使用浮动的方法*!*/ float:left; height:20px; text-align: center; color: white; background-color: darksalmon; padding: 12px 20px; text-decoration: none; } li a:hover{ background-color: coral; color: black; } body{ background-attachment: fixed; background-image: url(../resources/image/blue_pink.jpg); background-size:100%; } iframe{ height:300px; width:400px; float:right; } select{ font-size: 20px; color:olive; background-color:cornsilk; } div{ margin-top:60px; } input{font-size: 16px;} button { border-radius:5px;/*圆角边框*/ font-size: 18px; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s ease; } #pauseBtn{ position:absolute; bottom:17%; left:40%; } #startBtn{ position:absolute; bottom:59%; left:15%; } #increase-btn1 { position:absolute; left: 17%; bottom:9%; } #decrease-btn1 { position:absolute; left: 19%; bottom:9%; } #increase-btn2 { position:absolute; right: 19%; bottom:25%; } #decrease-btn2 { position:absolute; right: 17%; bottom:25%; } #speedRange{ position:absolute; bottom:17%; left:50%; } button:hover { background-color: #3e8e41; } #introduction{ margin-top: 20px; width:300px; border-style: groove; font-size: 14px; color:darkred; overflow: auto; min-height:300px; max-height:300px; } footer{ position:absolute; bottom:0; width:100%; height:30px; text-align: center; } #canvas{ /*width: 880px;*/ /*height: 440px;*/ width: 100%; height: 100%; /*margin: -210px auto;*/ /*border: 2px solid yellowgreen;*/ /*display: block;*/ overflow: scroll; } .container { height: 440px; width: 880px; margin: -225px auto; border: 2px solid yellowgreen; /*display: block;*/ box-sizing:border-box; overflow: scroll; } #log{ border:2px palegoldenrod; position:absolute; top:9%; right:0.5%; background-color:lightyellow; height: 430px; /* 设置固定高度 */ width: 310px; /* 设置固定宽度 */ font-size: 16px; /* 设置默认字体大小 */ resize: none; /* 其他样式属性 */ } .red-text { color: red; }
最新发布
06-01
根据你提供的 CSS 代码，我没有看到任何明显的问题，但这些代码只是样式的一部分，也没有包括 HTML 代码，因此很难确定滚动条不工作的原因。不过，我注意到你在 `ul.head` 中设置了 `overflow: hidden;`，这可能会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值