目录(?)[+]
BFCBlock Formatting CoFSADntext直译为块级格式化范围DEMO1
相关文档：
http://blog.sina.com.cn/s/blog_877284510101jo5d.html
http://www.cnblogs.com/dojo-lzz/p/3999013.html
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
BFC（Block Formatting CoFSADntext）直译为“块级格式化范围”
1.是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。
2.另一个通俗点的解释是：在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素划分到对应的 formatting context 里。
DEMO1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> body { width: 300px; position: relative; }
.aside { width: 100px; height: 150px; float: right; background: #f66; } .main { height: 200px; background: #fcc; } </style> </head> <body> <div class="aside"></div> <div class="main"></div> </body> </html>
显示效果如图：可以看到由于深红色快的浮动导致不占文档位置所以会浮动在粉红色块上
开启BFC:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: right; background: #f66; } .main { height: 200px; background: #fcc; overflow: hidden; } </style> </head> <body> <div class="aside"></div> <div class="main"></div> </body> </html>
给其中
非浮动
的元素添加了overflow：hidden后看到效果如下图所示：
两个div不再堆叠在一起了
DEMO2
：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> </head> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> </html>
显示效果如图所示：由于子节点的浮动导致脱离了父节点文档，所以父节没有被撑开
开启BFC:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style> .par { border: 5px solid #fcc; width: 300px; overflow: hidden;; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> </head> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> </html>
效果如下图所示：给父节点添加了overflowhidden，这时候就可以被子节点撑开了
DEMO3：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .left{ background:pink; float: left; width:180px; height:200px; } .center{ background:lightyellow; overflow:hidden; height:200px; } .right{ background: lightblue; width:180px; height:200px; float:right; } </style> </head> <body> <div class="container"> <div class="right">right</div> <div class="left">left</div> <div class="center">center</div> </div> </html>
显示效果如图：我们看到三个div成一行排列了，注意这里的cener并没有设置宽度是自动撑开的，很吊！
不过注意一点center必须再html标签的顺序上放在最后才能实现这个效果
DEMO4：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .main{border:2px blue solid;} .left{ background:pink; float: left; width:180px; height:200px; } </style> </head> <body> <div class="main"> <div class="c"> <div class="left">right</div> <div class="left">left</div> </div> <div class="c"> <div class="left">right</div> <div class="left">left</div> </div> </div> </html>
显示效果如图所示：虽然left div是分别放在两个c div里面的， 但是由于浮动导致子节点脱离文档流 而使子节点不占位 同时排成一行来布局
开启BFC:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .main{border:2px blue solid;} .c{overflow: hidden;;} .left{ background:pink; float: left; width:180px; height:200px; } </style> </head> <body> <div class="main"> <div class="c"> <div class="left">right</div> <div class="left">left</div> </div> <div class="c"> <div class="left">right</div> <div class="left">left</div> </div> </div> </html>
显示效果如图所示：给c div添加了overflow：hidden的时候触发了BFC 所以原本浮动的子节点并没有超出C div来影响到c外的节点，所以变成了两行
最后总结：
可以看到本篇文章通篇都是在讲解如何使用overflow来触发BFC，其实除了overflow外还有其他的触发方法，只不过暂时还没遇到先不表，以上代码均通过IE7~[包括IE7]和谷歌的检测，可以放心使用
顶
0
踩
0
上一篇如何清除图片下方出现几像素的空白间隙？ 下一篇106 浏览器判断 正则的妙用
我的同类文章
css（27）
http://blog.csdn.net
•sin cos tan在前端的应用2017-03-24阅读25 •设置or获取 css3旋转 变形 缩放 操作2017-03-22阅读12 •line-height 多行文字相对父级居中2017-03-18阅读29 •margin-top/top 百分比的是相对谁2016-09-27阅读985 •关于调整input里面的输入光标大小2016-04-26阅读93 •流式布局之2012年语法-------------------CSS3盒模型display:flex2016-03-31阅读415
•tween.js和css3变形的使用2017-03-22阅读12 •css3笔记2017-03-21阅读10 •CSS 1px2017-03-03阅读77 •CSS中不为人知Zoom属性的使用介绍(IE浏览器不得不说的坑)2016-06-17阅读1310 •拒绝javascript 模拟 只用CSS美化选择框2016-04-16阅读139
更多文章
转载请注明原文地址: https://ju.6miu.com/read-748.html
