坑爹的BFC;块格式上下文
Formatting context（FC）
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC), IE浏览器中没有BFC的概念，但是有个差不多的东东叫做hasLayout 。
BFC（Block Formatting Context 块格式化上下文）：是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。
BFC的用处是：如清浮动，防止 margin 重叠等， 自适应的布局；
BFC的区域的元素是一块独立渲染区域， 不会受到其他块元素的影响；
如何触发BFC呢；
根元素html(quirk的body)默认就是BFC元素;
浮动元素(float:left 或者 float:right);
绝对得的元素(absolute; fixed);
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素;
overflow不是visible的元素;
BFC有哪些布局规则呢：
1:内部的box是一个一个垂直放置(按照标准文档流放置);
2:同一个BFC中的两个Box的margin会发生折叠; IFC的垂直方向会发生折叠;
3:每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4:BFC的区域不会与float box重叠(利用这点可以做自动适应的布局，下面有例子);
5:BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6:计算BFC的高度时，浮动元素也参与计算(利用这点可以用来清除浮动);
利用BFC解决垂直方向margin叠加的问题;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BFC</title>
</head>
<body>
<style>
body{
margin:0px;
}
.bfc{
overflow:hidden;
}
.box{
width:400px;
height:400px;
margin:100px;
background:#666;
}
.child{
width:100px;
height:100px;
margin:100px;
background:#f00;
}
.fl{
float:left;
}
</style>
<div class="box">
<div class="child"></div>
</div>
<div class="box bfc">
<div class="child fl"></div>
</div>
</body>
</html>
BFC就是一写正常流，浮动流布局的一写规则，比如（BFC会自动计算元素内部的高度适应到父级,PS{ 可以用来清浮动} ）：
<!doctype html>
<head>
<meta charset="utf-8" />
<title>Clear float</title>
<style>
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
.wrapper{
border:solid 3px #a33;
}
.main{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
</div>
</div> <div class="container">
<div class="wrapper" style="float:left;">
<div class="main">1</div>
<div class="main">2</div>
<div class="main">3</div>
</div>
</div>
</body>
</html>
2:BFC的另一个规则，（BFC不会与浮动的元素发生叠加）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
body {
position: relative;
} .aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
} .main {
height: 200px;
background: #fcc;
}
.hd{
overflow:hidden;
}
</style>
<div class="aside"></div>
<div class="main"></div>
<br>
<div class="aside"></div>
<div class="main hd"></div>
</body> </html>
IFC布局规则：
- 框会从包含块的顶部开始，一个接一个地水平摆放。
- 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
- 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
Containing block的概念：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BFC</title>
</head>
<body>
<p style="border:1px solid red; width:200px; padding:20px;">
T
<span style="background-color:#C0C0C0; position:relative;">
这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。
可以通过它们绝对定位的位置来判断它们包含块的边缘。
<em style="position:absolute; color:red; top:0; left:0;">XX</em>
<em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
<em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
</span>
</p> <p style="border:1px solid red; width:200px; padding:20px;">
TEXT TEXT TEXT
<span style="background-color:#C0C0C0; position:relative;">
这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。
可以通过它们绝对定位的位置来判断它们包含块的边缘。
<em style="position:absolute; color:red; top:0; left:0;">XX</em>
<em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
<em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
</span>
</p> <p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">
T
<span style="background-color:#C0C0C0; position:relative;">
这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。
可以通过它们绝对定位的位置来判断它们……
<em style="position:absolute; color:red; top:0; left:0;">XX</em>
<em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
<em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
</span>
</p> <p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">
TEXT TEXT TEXT<span style="background-color:#C0C0C0; position:relative;">
这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。
可以通过它们绝对定位的位置来判断它们……
<em style="position:absolute; color:red; top:0; left:0;">XX</em>
<em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
<em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span>
</p> <div id="container" style="padding:50px; background-color:#c0c0c0; position:relative; width:200px; height:200px;">
<div id="div1" style="width:100%; height:100%; border:2px solid blue;">
<div id="content" style="border:1px solid red; position:absolute; left:0; top:0;">absolute element</div>
</div>
</div>
</body>
</html>
相关资料：
由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）
坑爹的BFC;块格式上下文的更多相关文章
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- 前端面试题-BFC(块格式化上下文)
一.BFC 的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元 ...
- BFC块级格式上下文介绍
块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...
- 学习块格式化上下文（BlockFormattingContext）
什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式 ...
- [转]学习块格式化上下文（BlockFormattingContext）
原文:https://www.cnblogs.com/elcarim5efil/p/4745796.html 格式化上下文 格式化上下文( formatting contexts )├── 块级格 ...
- BFC块级格式上下文
BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...
- 什么是BFC（块级格式上下文）？
㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...
- 理解 CSS 布局和块级格式上下文
前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...
- BFC块级格式
BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...
随机推荐
- JMeter学习（三十一）Access Log Sampler
前提: 在tomcat\conf\server.xml默认情况下,会有一段代码: <Valve className="org.apache.catalina.valves.Access ...
- 使用EditText+ListView并结合TextWatcher实现输入关键字筛选数据
想必大家应该遇到过这样的情况,当点击Spinner控件后弹出的列表内容超多,一个一个滑动着去寻找所要的项很麻烦,尤其是当自己知道想要选择的内容,这时候如果我们只需要输入某些关键字,就可以讲上百条数据筛 ...
- 【转】【PNG压缩工具】PNG 图像的优化及压缩工具介绍
图像格式有许多种不同类型,在互联网上最常见的有JPEG.GIF.BMP.TIFF和PNG.每一种图像格式都有它自己的用途,比如GIF是用于动画的,JPEG是用于高清图片的,这种图片在保存或者调整大小后 ...
- 命令行参数（argc, argv）
每个C语言程序都必须有一个称为main()的函数,作为程序启动的起点.当执行程序时,命令行参数(command-line argument)(由shell逐一解析)通过两个入参提供给main()函数. ...
- slf4j,log4j,logback 初步使用
log4j,slf4j,logback简单介绍见 LogBack简易教程 Logback浅析 简单的将,slf4j是一个日志的框架,有各种日志的接口,但是并不包含实际的写日志的方法. log4j,lo ...
- 配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler” 解决办法
今天遇到了这个问题, 电脑系统:vs2010 win7系统 iis7 我运行在iis中配置的那个网站后,报错:错误代码 0x800700b7 配置错误定义了重复的“system.web.extensi ...
- scrapy 的三个入门应用场景
说明: 本文参照了官网的 dmoz 爬虫例子. 不过这个例子有些年头了,而 dmoz.org 的网页结构已经不同以前.所以我对xpath也相应地进行了修改. 概要: 本文提出了scrapy 的三个入门 ...
- 淘宝SKU组合查询算法实现
淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报 分类: JavaScript(14) 目录(?)[+] 前端有多少事情可以做,能做到多 ...
- Word 文档插入时间日期禁止自动更新
前些天写了点总结并插入时间和日期,记得勾掉了那个自动更新的,但是刚才打开时发现当时的日期和时间变成现在的了,我就纳闷了,然后我去看那插入日期和时间的那个框,里面确实没有勾选自动更新,于是百度, 百度都 ...
- [CareerCup] 3.1 Implement Three Stacks using Array 使用数组来实现三个栈
3.1 Describe how you could use a single array to implement three stacks. 这道题让我们用一个数组来实现三个栈,书上给了两种方法, ...