内容简介:BFC 已经是一个耳听熟闻的词语了,但是我对于BFC的概念以及应用场景一直都不是很明白,据说搞懂BFC可以让我们理解CSS中某些原本诡异的地方。今天着重去了解了一下,做了以下总结。在解释BFC之前,先说一下文档流。我们常说的文档流其实分为
前言
BFC 已经是一个耳听熟闻的词语了,但是我对于BFC的概念以及应用场景一直都不是很明白,据说搞懂BFC可以让我们理解CSS中某些原本诡异的地方。今天着重去了解了一下,做了以下总结。
一、文档流
在解释BFC之前,先说一下文档流。我们常说的文档流其实分为 定位流 、 浮动流 、 普通流 三种。而普通流其实就是指BFC中的FC。
FC(Formatting Context) ,直译过来就是“格式化上下文”,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有 BFC(块级格式化上下文) 、 IFC(行级格式化上下文)、 GFC(网格布局格式化上下文) 、 FFC(自适应格式化上下文) 。本文着重介绍BFC,其余的就不在这里深入展开了
二、文档流的定位方案
【1】常规流(Normal flow)
- 在常规流中,盒一个接着一个排列;
- 在块级格式化上下文里面, 它们竖着排列;
- 在行内格式化上下文里面, 它们横着排列;
- 当position为static或relative,并且float为none时会触发常规流;
- 对于静态定位(static positioning),position: static,盒的位置是常规流布局里的位置;
- 对于相对定位(relative positioning),position: relative,盒偏移位置由top、bottom、left、right属性定义。即使有偏移,仍然保留原有的位置,其它常规流不能占用这个位置。
【2】浮动(Floats)
- 左浮动元素尽量靠左、靠上,右浮动同理
- 这导致常规流环绕在它的周边,除非设置 clear 属性
- 浮动元素不会影响块级元素的布局
- 但浮动元素会影响行内元素的布局,让其围绕在自己周围,撑大父级元素,从而间接影响块级元素布局
- 最高点不会超过当前行的最高点、它前面的浮动元素的最高点
- 不超过它的包含块,除非元素本身已经比包含块更宽
- 行内元素出现在左浮动元素的右边和右浮动元素的左边,左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的
【3】绝对定位(Absolute positioning)
- 绝对定位方案,盒从常规流中被移除,不影响常规流的布局;
- 它的定位相对于它的包含块,相关CSS属性:top、bottom、left、right;
- 如果元素的属性position为absolute或fixed,它是绝对定位元素;
- 对于position: absolute,元素定位将相对于上级元素中最近的一个relative、fixed、absolute,如果没有则相对于body;
二、BFC是什么?
MDN上的解释:块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
BFC(Block Formatting Context) 直译为“块级格式化上下文”,是用于布局块级盒子的一块渲染区域。它规定了内部的块级如何布局,并且与这个区域外部毫不相干。简单的概括为: 所谓的BFC就是CSS布局的一个概念,是一块区域,一个环境。
三、BFC触发方式
上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
【1】根元素,即HTML元素
【2】浮动元素:float值为 left
、 right
【3】overflow值不为 visible,为 auto
、 scroll
、 hidden
【4】display的值为 inline-block
、 inltable-cell
、 table-caption
、 table
、 inline-table
、 flex
、 inline-flex
、 grid
、 inline-grid
【5】position的值为 absolute
或 fixed
四、浏览器对BFC的约束规则
【1】内部的Box会在垂直方向上一个接一个的放置
【2】垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)
【3】每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
【4】BFC的区域不会与float的元素区域重叠
【5】计算BFC的高度时,浮动子元素也参与计算
【6】BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然
五、 BFC在布局中的应用
BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。我们可以利用BFC的这个特性来做很多事。
【1】防止margin重叠(塌陷)
根据BFC布局规则第【2】条 :垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)两个p元素之间的距离应该为(50+50)px,发生了margin重叠后,两个p之间的距离为50px
解决: 我们可以在其中一个p外面包裹一层容器,并触发该容器生成一个新BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。
<style> p { color: rgba(21, 22, 22, 0.972); background: rgb(231, 105, 2); width: 200px; line-height: 100px; text-align:center; margin: 50px; font-weight: bold; } </style> <body> <p>Hello</p> <p>Hi</p> </body>复制代码
<style> .wrap { /* 新的BFC */ overflow: hidden; } </style>复制代码
【2】清除内部浮动
根据BFC布局规则第【5】条 :计算BFC的高度时,浮动子元素也参与计算。parent内部元素浮动了,因此div的高度就坍塌了,要解决坍塌,就得清除浮动。
解决: 为达到清除内部浮动,我们可以触发parent生成BFC,那么parent在计算高度时,parent内部的浮动元素child也会参与计算。
<style> .parent { border: 5px solid rgb(231, 105, 2); width: 300px; } .child { border: 5px solid rgba(95, 179, 235, 0.972); width: 100px; height: 100px; float: left; } </style> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> </body>复制代码
<style> .parent { border: 5px solid rgb(231, 105, 2); width: 300px; /* 新的BFC */ overflow: hidden; } </style>复制代码
【3】自适应多栏布局
根据BFC布局规则第【3】条 :每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使浮动元素也是如此。 因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。
解决: 我们可以通过通过给main设置overflow:hidden来触发main生成BFC, 当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。从而实现自适应两栏布局。
<style> body { width: 400px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: rgb(48, 44, 44); } .main { height: 200px; background: rgb(194, 189, 189); } </style> <body> <div class="aside"></div> <div class="main"></div> </body>复制代码
<style> .main { /* 新的BFC */ overflow: hidden; height: 200px; background: rgb(194, 189, 189); } </style>复制代码
【4】 用于布局
圣杯布局和双飞翼布局,他们的都要求三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染。详情链接:圣杯布局&& 双飞翼布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <style> body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #footer { clear: both; } #container { padding-left: 200px; padding-right: 150px; overflow: hidden; } #container .column { position: relative; float: left; text-align: center; height: 300px; line-height: 300px; } #center { width: 100%; background: rgb(206, 201, 201); } #left { width: 200px; right: 200px; margin-left: -100%; background: rgba(95, 179, 235, 0.972); } #right { width: 150px; margin-right: -150px; background: rgb(231, 105, 2); } </style> <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body> </html>复制代码
以上所述就是小编给大家介绍的《理解CSS-BFC概念》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- JNI相关概念的理解
- 理解JavaScript概念系列--异步任务
- 轻松理解 Kubernetes 的核心概念
- Core Java 并发:理解并发概念
- IOC的概念这样理解更简单
- [译] 轻松理解 Kubernetes 的核心概念
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。