CSS之BFC

栏目: CSS · 发布时间: 5年前

内容简介:对于很多初学者来说,CSS是不讲“道理”的,但是如果去深究,会发现其实CSS是有一定道理的。比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等,但还有一种FC规范经常会被排除在CSS规范的认知之外。FC当然不是“Fuck”的意思,英文名是“Formatting Context”,也就是格式化上下文,他是页面中的一块渲染区域,在这个区域内,有一套独立的渲染规则,它决定了其子元素将如何布局,以及和其他元素的关系和相互作用,并且父级元素对它不能产生影响。

对于很多初学者来说,CSS是不讲“道理”的,但是如果去深究,会发现其实CSS是有一定道理的。

比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等,但还有一种FC规范经常会被排除在CSS规范的认知之外。

FC

FC当然不是“Fuck”的意思,英文名是“Formatting Context”,也就是格式化上下文,他是页面中的一块渲染区域,在这个区域内,有一套独立的渲染规则,它决定了其子元素将如何布局,以及和其他元素的关系和相互作用,并且父级元素对它不能产生影响。

“FC”可以简单的理解为浏览器对于某个元素样式的一种处理方法,不能被开发者显式的修改,符合FC规则的会计元素元素的属性对于内部与外部元素会表现出一定的特性”。

FC分为BFC、IFC、FFC、GFC四种类型。其中FFC、GFC是CSS3中才有的类型,后面将一一进行讲解。

BFC

BFC全称“Block Formatting Contexts”翻译过来就是“块级格式化上下文”。

符合以下任一条件即会生成一个“BFC”

  • 根元素,HTML
  • float属性不为none
  • overflow属性不为visible
  • display属性为inline-block、table-cell、table-caption
  • position属性为absolute或者fixed

还有其他条件也会触发BFC,这里只列了几种比较常见的情况,有兴趣的可以看一下MDN说明: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC布局规则

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个元素的margin box的左边, 与包含块border box的左边相接触,即使存在浮动也是如此。
  • BFC的区域不会与设置了float属性值的兄弟元素重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算。

下面通过几个例子,只需要几分钟可以明白BFC能帮我们做什么。

通过BFC清除浮动

.f-l { float: left; }
.warp { border: 1px solid red; display: inline-block; }
.div-1 { width: 100px; height: 100px; background: green; }
.div-2 { width: 200px; height: 200px; background: yellow; }
<div class="warp">
    <div class="div-1 f-l"></div>
    <div class="div-2 f-l"></div>
</div>
CSS之BFC

最外层元素将“display”属性设置成了“inline-block”,隐性的形成了BFC。

BFC中的元素计算高度时浮动元素也是会参与计算的,达到了清除浮动的效果。

解决margin塌陷

.warp { background: black; display: inline-block; width: 200px; height: 200px; }
.div-1 { margin-top: 20px; width: 100px; height: 100px; background: green; }
<div class="warp">
    <div class="div-1"></div>
</div>
CSS之BFC

如果不符合BFC规范,会产生下面的效果,也就是“margin塌陷”。

所谓“margin塌陷”就是指CSS规则中,父元素与子元素顶部起始点在未加margin前是同一坐标的情况下,子元素的margin会影响父元素。

CSS之BFC

Box垂直方向的距离由margin决定,利用这一点可以解决margin塌陷问题。

经典两列布局

.warp { border: 1px solid red; }
.left { float: left; width: 150px; height: 200px; background: green; }
.right { overflow: hidden; height: 200px; background: yellow; }
<div class="warp">
    <div class="left"></div>
    <div class="right"></div>
</div>
CSS之BFC

BFC的区域不会与设置了float属性值的兄弟元素重叠。

利用这一点可以轻松的实现经典左右布局。

最后总结

利用BFC还可以做很多其他的事情,例如:元素间上下margin间距问题、浮动元素高度计算问题


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

常用算法程序集

常用算法程序集

清华大学出版社 / 2013-4 / 69.00元

《常用算法程序集(C\C++描述第5版清华大学计算机系列教材)》编著者徐士良、马尔妮。 《常用算法程序集(C\C++描述第5版清华大学计算机系列教材)》是针对工程中常用的行之有效的算法而编写的,主要内容包括多项式的计算、复数运算、随机数的产生、矩阵运算、矩阵特征值与特征向量的计算、线性代数方程组的求解、非线性方程与方程组的求解、插值与逼近、数值积分、常微分方程组的求解、数据处理、极值......一起来看看 《常用算法程序集》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具