CSS定位规则之BFC

1.BFC的定义:BFC(block formatting context,中文常译为块级格式化上下文)是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在进行盒子元素布局的时候，BFC 提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。

2.形成BFC的条件(符合以下任一条件即可):

(1).float的值不为none。

(2).overflow的值不为visible。

(3).display的值为table-cell, table-caption, inline-block中的任何一个。

(4).position的值不为relative和static。

3. BFC 常见作用

(1).BFC会根据子元素的情况自适应高度，这个特性是对父元素使用overflow:hidden/auto/scroll、float:left/right 样式可以闭合浮动的原理。

例:

<div style="float:left;background:black;">我的父元素是 BFC</div>

</div>

该div 使用overflow: hidden创建了BFC ，可以包含浮动元素，因此能正确表现出高度，其边框位置也是正常的。

<div style="float:left;background:yellow;">我的父元素不是 BFC</div>

</div>

该div 出现了“高度塌陷”，这是因为内部的浮动元素脱离了普通流，因此该div相当于一个空标签，没有高度和宽度，即高度为 0，上下边框也重叠在一起。

(2).阻止父子元素的 margin 折叠--------------------经常遇见，重点关注！

即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。

例:

我的上外边距是 20px，父级元素不是 BFC

</div>

<div style="margin-top:30px;background:blue;overflow:auto;width:300px;">--------------overflow:auto;是关键

我的上外边距是 20px，父级元素是 BFC

</div>

上述 div 元素都有顶部外边距，但第二个div的边距没有与它的子元素的外边距折叠。这是因为第二个div创建了新的BFC。

(3).不被浮动元素覆盖

浮动元素会无视兄弟元素的存在，覆盖在兄弟元素的上面，为该兄弟元素创建BFC 后可以阻止这种情况的出现。

例:

我是浮动元素

</div>

我是非浮动元素，并且没有创建 BFC

</div>

我是浮动元素

</div>

我是非浮动元素，创建了 BFC

</div>

蓝色背景的元素通过 display:inline-block 创建了 BFC，则浮动的兄弟元素就不覆盖在该元素上面了。(个人觉得clear可以达到同样效果)

以上就是一些对BFC的认识和看法，感觉学得越多，不懂的越多--！慢慢来吧。

转载于:https://www.cnblogs.com/mayicom/p/3934856.html

CSS定位规则之BFC相关推荐

CSS 7 CSS 层叠规则 BFC 和 IFC 机制
CSS 文章目录 CSS 7 CSS 层叠规则 BFC 和 IFC 机制 7.1 BFC 7.1.1 常见的定位方案 7.1.2 BFC 理解 7.1.3 如何触发BFC [如何为元素添加BFC] 7 ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
css怎么设置z坐标,CSS 定位（postion、z-index）
CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed): 普通流是默认定位方式,在普通流中元素框的位置由元素在html中的位置决定,这也是我们最常见的方式, ...
w3c标准 - Css - （4）CSS定位方案
w3c标准 - Css - (4)CSS定位方案 1. 定位之前看一下BFC (1) 解释 BFC(Block formatting context)直译为"块级格式化上下文".它 ...
CSS基础：CSS的上下文之BFC
CSS的上下文之BFC 看到这个名词,可能会有些陌生,但其实上下文 = 区域,如果这么理解的话就会有行级上下文.块级上下文.flex上下文等等有一定排列规则的区域,我们今天只聊一聊块级格式化上下文 ...
【CSS 定位之 display 属性】
CSS 定位之 display 属性 1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局) ⑴ 设置元素的显示类型 ( 框的类型 ) ⑵ 元素的显示类型 ⑶ 显 ...
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标了解掌握CSS值和单位了解掌握CSS文字排版了解掌握CSS变换,过渡,动画了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
css定位的百分比的算法,css定位中的百分比
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比首先从css的设计意图说起,在浏览器默 ...
CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位定位能解决的解决问题: 定位的使用静态定位相对定位绝对定位绝对定位特点子绝父相子绝父相vs子绝父绝子绝父相案例子绝父相水平居中案例子绝父相水平垂直都居中案例导 ...

CSS定位规则之BFC

CSS定位规则之BFC相关推荐

最新文章

热门文章