BFC-块级格式化上下文
来源:互联网 发布:2018房价知乎 编辑:程序博客网 时间:2024/05/24 00:48
BFC它是一个独立的渲染区域,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
一、BFC布局规则:
1、内部的Box会在垂直方向排列。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个元素的margin box的左边, 与包含块border box的左边相接触。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时,浮动元素也参与计算。
二、哪些元素会生成BFC?
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible
三、BFC的作用及原理
1.自适应两栏布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BFC</title> <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; /*overflow: hidden;*/ } </style></head><body><div class="aside"></div><div class="main"></div></body></html>
当触发main生成BFC后( 去掉代码中注释即可),这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。效果如下
2.清除内部浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BFC</title> <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>
为达到清除内部浮动,我们可以触发par生成BFC( 去掉代码中注释即可),那么par在计算高度时,par内部的浮动元素child也会参与计算。效果如下
3.防止垂直 margin 重叠
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>BFC</title> <style> .wrap { /*overflow: hidden;*/ } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style></head><body><body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div></body></body></html>
我们可以在p外面包裹一层容器,并触发该容器生成一个BFC( 去掉代码中注释即可)。那么两个P便不属于同一个BFC,就不会发生margin重叠了。效果如下
引入:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
- BFC(块级格式化上下文)
- BFC-块级格式化上下文
- BFC块级格式化上下文简述
- CSS--BFC(块级格式化上下文)
- CSS BFC(块级格式化上下文)
- BFC(块级格式化上下文)
- 深入BFC块级格式化上下文
- BFC(块级格式化上下文)
- 清除浮动及 BFC(块级格式化上下文)
- (转)理解块级格式化上下文——BFC
- BFC环境(block formatting context块级格式化上下文)
- BFC(Block formatting context)直译为"块级格式化上下文"
- BFC(块格式化上下文)知识点整理
- 块级上下文(BFC)
- BFC块级格式上下文
- BFC块级格式化范围
- bfc-块级格式化范围
- 块格式化上下文(BFC)布局规则及常见情景
- 编写可维护代码的中间件模式
- JVM详解-从入门到深入了解
- Android Matrix变换
- [GDKOI2014][JZOJ3572]基因模式
- ITEXT-小图片并排显示,大图片按行显示
- BFC-块级格式化上下文
- centos下的vim安装
- Temporal-Difference (TD) Learning
- hdu2087_剪花布条_KMP水题
- 大数据初步学习
- java post接口测试代码
- 智能优化算法总结
- 腾讯课堂新手前端训练营day1
- iOS开发之语音朗读文字