CSS3 总结（二十一）—

BFC

Block formatting content直译为（块级格式化上下文）。他是一个独立的区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干（就是BFC盒子里面怎么布局都不影响外面的布局，个人觉得这个就是以前所学知识的一个综合，感觉有点废话，可能是我前面学习时接触过一些该知识点的缘故吧）。

注意：不是所有元素模式都能产生BFC，产生BFC需要满足下面条件

条件
display属性为block，list-item（也可以认为是块级元素），table的元素，会产生BFC。

元素触发BFC需满足以下条件之一即可（可以拥有BFC不代表已经触发了）：

条件
1.float属性不为none。
2.position为absolute或fixed。
3.display为inline-block、table-cell、table-caption、flex、inline-flex。
4.overflow不为visible，通常用overflow：hidden，因为副作用小。

BFC元素的特征：

BFC布局规则特性
1.BFC中，盒子从顶端开始垂直地一个接一个排列（限制为块元素来说，这不是废话么）
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（吐槽：哪个盒子不是这样。BFC元素给了margin-left值还不是跟普通元素盒子一样碰不到边缘。）
4.BFC的区域不会与浮动盒子产生交集，而是紧贴浮动的边缘。（意思是在BFC元素内有两个元素，一个浮动，一个也设置为BFC元素，该子BFC元素不会被浮动元素覆盖。）
5.计算BFC的高度时，自然也会检测浮动的盒子高度。（意思是当BFC盒子没设置高度，一般元素当子元素浮动时会出现高度为0的的问题，而BFC会自动计算浮动元素的高度，因而避免了高度为0，这点还是有用的。）

BFC的主要用途：

用途	说明
1.清除元素内部浮动	只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow：hidden样式，对于IE6加上zoom：1就ok了。（主要利用了BFC元素自动检测浮动盒子的高度的特点）
2.解决外边距合并问题。	创建不属于同一个BFC，就不会发生合并。（意思是BFC元素内有一个要调整margin值的元素和再有一个BFC元素，子BFC元素里面包含另一个要调整margin的元素）
3.制作右侧自适应的盒子	普通流元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。（主要利用BFC的区域不会与浮动盒子产生交集，而是紧贴浮动的边缘的特性）

CSS3 总结（二十一）——BFC相关推荐

Bootstrap入门（二十一）组件15：警告框
Bootstrap入门(二十一)组件15:警告框通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
中介者模式调停者 Mediator 行为型设计模式（二十一）
中介者模式(Mediator) 调度.调停意图用一个中介对象(中介者)来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散而且可以独立地改变它们之间的交互. 中介者模式又 ...
二十一世纪贫穷人的2008条语录
流失的是岁月,留不走的是语言的录音-- 二十一世纪贫穷人的2006条语录随便一条就能记住的:随便一条就能深思的:随便一条就能看下去的:随便一条就是哲理的:随便一条链接起来就是文章的:随便一条就能告诉 ...
二十一. Python基础(21)--Python基础(21)
二十一. Python基础(21)--Python基础(21) 1 ● 类的命名空间 #对于类的静态属性: #类.属性: 调用的就是类中的属性 #对象.属性: 先从自己的内存空间里找名 ...
某云数据中心网络解决方案（分享二十一）
某云数据中心网络解决方案(分享二十一) 参考文章: (1)某云数据中心网络解决方案(分享二十一) (2)https://www.cnblogs.com/zywu-king/p/8284189.html ...
iOS 11开发教程（二十一）iOS11应用视图美化按钮之实现按钮的响应(1)
iOS 11开发教程(二十一)iOS11应用视图美化按钮之实现按钮的响应(1) 按钮主要是实现用户交互的,即实现响应.按钮实现响应的方式可以根据添加按钮的不同分为两种:一种是编辑界面添加按钮实现的响应 ...
运动控制器编程_快速入门 | 篇二十一：运动控制器ZHMI组态编程简介一
点击上方"正运动小助手",随时关注新动态! 运动控制器ZHMI组态编程简介一今天我们来学习一下,运动控制器的ZHMI组态编程简介.本文主要从产品概述.控制器连接触摸屏使用.HM ...
SQL Server数据库开发的二十一条军规
如果你正在负责一个基于SQL Server的项目,或者你刚刚接触SQL Server,你都有可能要面临一些数据库性能的问题,这篇文章会为你提供一些有用的指导(其中大多数也可以用于其它的DBMS). 在 ...
线程本地存储器——Windows核心编程学习手札之二十一
线程本地存储器 --Windows核心编程学习手札之二十一 C/C++运行期库使用线程本地存储器,运行期库是在多线程应用程序出现前设计的,因此运行期库里的大多数函数是用于单线程应用程序的.函数strt ...
OpenCV学习笔记（二十一）——绘图函数core OpenCV学习笔记（二十二）——粒子滤波跟踪方法 OpenCV学习笔记（二十三）——OpenCV的GUI之凤凰涅槃Qt OpenCV学习笔记（二十
OpenCV学习笔记(二十一)--绘图函数core 在图像中,我们经常想要在图像中做一些标识记号,这就需要绘图函数.OpenCV虽然没有太优秀的GUI,但在绘图方面还是做得很完整的.这里就介绍一下相关 ...

CSS3 总结（二十一）——BFC

BFC

CSS3 总结（二十一）——BFC相关推荐

最新文章

热门文章