BFC 以及 外边距合并问题
BFC定义:
BFC(Block formatting context)直译为"块级格式化上下文"。
它是一个独立的渲染区域,只有Block-level box参与,
它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC布局规则特性:
- 在BFC中 , 盒子从顶端开始垂直的一个接一个排列
- 盒子垂直方向的距离有margin决定,属于同一个BFC的两个相邻的盒子发生重叠
- 在BFC中,每个盒子的左外边距(margin-left)会触碰到容器的左边缘(border-left)
- BFC的区域不会与浮动盒子重叠,而是紧贴浮动边缘。
- 浮动的元素会被父级计算高度(父级触发了BFC)
- 计算BFC的高度时,其浮动子元素元素也参与计算
BFC触发条件:
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC用途:
- 清除浮动
- 解决 外边距合并 问题 (让两个盒子不属于同一个BFC)
- 右侧盒子自适应
外边距合并:( 注: 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并 )
- 相邻块级元素外边距合
当上下相邻的两个块元素相遇时, 如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,
则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)
解决方法:
1. (盒子垂直方向的距离有margin决定,属于同一个BFC的两个相邻的盒子发生重叠) ==> 通过嵌套 让两个 内容区域 不属于同一个 盒子
2. 脱离普通文档流
3.最好避免
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,
合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
解决方法:
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
BFC 以及 外边距合并问题的更多相关文章
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- 深入理解BFC和外边距合并(Margin Collapse)
一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...
- 由外边距合并到BFC
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- 文本溢出、垂直外边距合并、BFC、hasLayout
今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...
- css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...
- 关于collapsed margin(外边距合并)
这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...
- CSS2系列:外边距合并问题(margincollapse)
外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合 ...
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- CSS 垂直外边距合并:规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
随机推荐
- PHP与Python进行数据交互
最近,决定在一个项目用tp5进行APP接口开发,用Python做数据分析,然后这就面临一个问题:PHP和Python如何进行数据交互? 思路 我解决此问题的方法是利用了PHP的passthru函数来调 ...
- C语言与汇编语言混合编程实验
混合编程方法: 模块链接法 汇编指令嵌入法 1: 模块链接法则 模块链接法是指分别用汇编语言和C语言实现独立的模块(或子程序),再用链接程序把各模块生成的obj文件连接成一个可执行程序. 1:C语言调 ...
- linux计算机网络基础
OSI7层协议和TCP/IP4层网络协议 第一层:物理层,定义各种物理设备的规范,如通信距离,接口大小等. 第二层:数据链路层,基于mac地址通信是,数据报文封装和相应方式. 第三层:网络层,基于IP ...
- EFK教程(4) - ElasticSearch集群TLS加密通讯
基于TLS实现ElasticSearch集群加密通讯 作者:"发颠的小狼",欢迎转载 目录 ▪ 用途 ▪ ES节点信息 ▪ Step1. 关闭服务 ▪ Step2. 创建CA证书 ...
- Java中我常用到的十二个最基本的快捷键
自己在Java中经常用到的快捷键先记下来方便日后学习之用: 1. Ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按 ...
- diff()函数的使用
1.diff():返回略微迭代(lagged)的或滞后的不同(iterated diferences). > x<-cumsum(cumsum(1:10)) > x [1] 1 4 ...
- 高并发编程-CountDownLatch深入解析
要点解说 CountDownLatch允许一个或者多个线程一直等待,直到一组其它操作执行完成.在使用CountDownLatch时,需要指定一个整数值,此值是线程将要等待的操作数.当某个线程为了要执行 ...
- Block循环引用问题
根控制器没办法销毁,除非程序退出 从一个控制器跳到另外一个控制器,调用该控制器的pop方法才会销毁该控制器 self是一个强指针 在block中使用self时要注意循环引用的问题 最好将当前block ...
- 当url中出现汉字
- 大型情感剧集Selenium:3_元素定位 #华为云·寻找黑马程序员#
关于昨天的文章 今天有朋友反馈,代码运行的时候,selenium提示警告 DeprecationWarning: use options instead of chrome_options drive ...