BFC的表象认识
首先字面翻译，这三个字母分别代表什么，box，formatting， context，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
形象点就是说一种规范，规范什么呢？规范盒子内部元素不会影响到外部元素，或者和一种布局上的规范；不明白 ok，谈谈清除浮动的方法里面，有个叫overflow为hidden，他的原理是啥呢？就是BFC；那些元素会产生BFC呢，官方定义如下：
- float的值不为none。
- overflow的值不为visible。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
BFC的特性是啥呢？
- 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box叠加。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也参与计算。
但是这些特性有啥用啊？当然解决问题的了，解决啥问题呢？上面说了布局的问题，可能还有人不懂，来几个例子演示下
第一个例子：对应的第2个特性。
代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.test{
overflow: hidden;
}
.div1{
width: 100px;
height: 100px;
background-color: black;
margin-bottom: 10px;
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 10px;
} </style>
</head>
<body> <div class="div1"></div> <div class="div2"></div> </body>
</html>
按常态思考，间距应该20px，其实不然这里是10px，怎么解决呢，各自生成独立BFC，为两个div各加一个父级并且父级overflow为hidden
第二个例子；关于第4个特性，代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
.div1{
width: 100px;
height: 100px;
background-color: black;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
} </style>
</head>
<body> <div class="div1"></div> <div class="div2"></div> </body>
</html>
根据第三个特性，得到结果是两个元素重叠了，那么咋解决呢，ok，div2加上overflow为hidden，这个时候也就是说div2成为一个独立的BFC,于是又遵循第三定理一次排放，
但是注意这里如果继续为div2添加margin的话，那么页面上的效果是只有当margin-left大于100时候才有作用，且效果是margin-left的效果，也说明实质上这里可能不是真正的不重叠效果，原有那个位置还在那儿
最后一个定理就是我们常用的overflow清楚浮动的原理了，因为overflow为hidden此时div变成一个BFC，于是遵循BFC定理，BFC内部元素计算高度是把浮动元素计算进去的从而达到清除浮动效果
BFC的表象认识的更多相关文章
- 深入理解BFC
定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...
- “fixed+relative==absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- 我对BFC的理解
最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...
- CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- 前端精选文摘：BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- BFC的形成条件和特性分析
初学CSS时,我们学到很多有意思的CSS规则,比如外边距塌陷,还有浮动元素的一些特性等,其实这些规则背后都是BFC这个东西在控制,下面我们来看下BFC到底是什么. 什么是BFC BFC(Block f ...
- BFC布局
这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
随机推荐
- Angular7教程-05-搭建项目环境
1. 本节说明 本节以及后面的内容我们将会通过搭建一个简单的博客程序来对angular进行介绍,项目使用前端框架是bootstrap.版本v3.3.7,另外需要安装jquery.关于bootstrap ...
- 安装Maven后使用cmd 执行 mvn -version命令 报错JAVA_HOME should point to a JDK not a JRE
1. 可以执行maven指令,说明maven的配置没错 2. 打开cmd,在cmd输入: set JAVA_HOME=D:\Program Files\Java\jdk1.8.0_91 3. 再测试是 ...
- VB错误说明
1001 800A03E9 内存不足 1002 800A03EA 语法错误 1003 800A03EB 缺少“:” 1005 800A03ED 需要 '(' 1006 800A03EE 需要 ')' ...
- 【深度优先搜索】MZOJ_1344工作依赖
这道题的读入非常毒瘤...恶心到我了 我痛苦地弄了很久,还是被卡住了我还真是▇了狗了.[传送门](特此声明:学校内部OJ,需登录) 题目描述(Description): 2008年,奥运会将在中国举行 ...
- 坚果云WebDav示例
坚果云WebDav示例 最近看到坚果云有一个WebDAV应用,一时不解这是什么功能,了解后做了一个示例: WebDAV是一种基于HTTP1.1协议的通信协议.它扩展了HTTP1.1,在GET.POST ...
- WPF几个基础概念的浅显理解
1.逻辑树与视觉树 逻辑树在结构上与xaml文件对应 视觉树更细化,拆分到控件的每个组成部分 2.依赖属性与附加属性 依赖属性:就是自己自己没有属性值,而是通过Binding从数据源获得值,就是依赖在 ...
- 20155322 2016-2017-2 《Java程序设计》 第一周学习总结
20155322 2016-2017-2 <Java程序设计> 第一周学习总结 教材学习内容总结 本周学习内容的主要是: 一.浏览教材,根据自己的理解每章提出一个问题. 在浏览教材后,我提 ...
- Caliburn.Micro - Getting Started - Introduction
Caliburn.Micro Xaml made easy Introduction When my “Build Your Own MVVM Framework” talk was chosen f ...
- tidb测试环境安装，离线部署
1.环境以及规划 机器:centos7.5 ; 文件系统为ext4:内存16g:cpu8核,共三个节点: ip hostname roles --- tidb tipd tikv --- tidb t ...
- XDS100V3连接Pandaboard ES OMAP4460开发板
1. 硬件连接如下 2. 使用CCS创建工程,不过好像没有ARM9的内核吧?为啥会出现? 3. 创建目标配置文件 4. 不过确实有ARM9的内核,两个A9内核,一个DSP C64X内核,两个M3的内核 ...