FC及BFC

魏明发布于2019-08-29 16:26 / 3540人阅读

摘要：什么是块级格式化上下文是布局的对象和基本单位，直观点来说，就是一个页面是由很多个组成的。的用途可以阻止元素被浮动元素覆盖实现自适应两栏布局可以包含浮动元素清除内部浮动不同的可以阻止重叠思维导图

1.什么是FC

2.BFC块级格式化上下文(Block formatting context)

　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
run-in box: css3 中才有。

(1)定义:它是一个独立的渲染区域,只有block-level-box参与.它规定了块级盒子内部子元素的布局.
(2)BFC常见触发条件:

1>.根元素，即HTML元素
2>.float不为none
3>.position不为static或者是relative
4>.overflow的值为hidden,auto或者scroll
5>.display的值为table-cell,table-caption或者inline-block

(3)BFC布局规则:
1>.BFC内部的盒子在垂直方向一个接一个的放置
2>.同一个BFC中相邻盒子的margin会发生合并

3>.每个元素盒子的左外边缘(margin-box)和包含它的容器的border-box接触(对于从右往左的排版则相反，是右边接触),即使存在浮动也是如此
抽象1>,2>,3>:盒子排列方式,盒子紧邻时外边距会合并,盒子嵌套时内部元素的外边距盒子和外部容器的border-box紧邻
eg:

说明:img图片的margin-box和class为first块元素的border-box的内侧接触.

4>.BFC区域不会和float-box重叠
5>.BFC是页面上一个独立的容器,它其中的子元素不会影响到外面得元素,外面得元素也不会影响到内部
6>.计算BFC的高度时,浮动元素也参与计算

简单记录顺序:独立的(5>)渲染(3>,1>,2>,4>)区域(区域的计算方式6>)

(4).重叠的计算方式
1>当两个margin都是正值的时候，取两者的最大值；
2>当margin都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；
3>当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

(5).BFC的用途
1>.可以阻止元素被浮动元素覆盖
2>.实现自适应两栏布局
3>.可以包含浮动元素——清除内部浮动
4>.不同的BFC可以阻止margin重叠

(6)思维导图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113741.html

FC及BFC

摘要：什么是块级格式化上下文是布局的对象和基本单位，直观点来说，就是一个页面是由很多个组成的。的用途可以阻止元素被浮动元素覆盖实现自适应两栏布局可以包含浮动元素清除内部浮动不同的可以阻止重叠思维导图 1.什么是FC showImg(https://segmentfault.com/img/bVbfrN8?w=808&h=286); 2.BFC块级格式化上下文(Block formatting...

layman 2019-08-02 11:17 评论0 收藏0
CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0
CSS之BFC

摘要：比如说最常见的块级元素内联元素文档模型层叠样式模型盒子模型等，但还有一种规范经常会被排除在规范的认知之外。属于同一个的两个相邻的会发生重叠。计算的高度时，浮动元素也参与计算。垂直方向的距离由决定，利用这一点可以解决塌陷问题。对于很多初学者来说，CSS是不讲道理的，但是如果去深究，会发现其实CSS是有一定道理的。比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等...

Jinkey 2019-08-29 17:27 评论0 收藏0
css布局的各种FC简单介绍：BFC，IFC，GFC，FFC

摘要：完整的说法是属于同一个的俩个相邻的的会发生重叠，与方向无关。元素会位于与与之间，使得宽度缩短。简单的说，有了之后，布局不再局限于单个维度了。什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式...

mindwind 2019-08-29 15:24 评论0 收藏0