浅谈BFC
来源:互联网 发布:linux网络编程技术 编辑:程序博客网 时间:2024/06/10 01:33
前几天刚学BFC这个东西,云里雾里的,不过后来搞清楚了。其实BFC在我们做项目的时候无处不在,只是初学者都不知道罢了。好了,那什么时BFC呢?BFC全称为Block Formatting context(我一般都会记英文),翻译成中文就是——块级格式化上下文。他是web中一个独立的渲染区域,只有BBlock-level 参与,他规定了内部的Block level Box如何布局,并且这个区域和这个区域外部毫不相干。(刚开始写博客,写的有问题的地方请指出,谢谢)
BFC布局规则:
1.BFC内部的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
接下来我们先写一个布局
代码
我们写两个div,并设置简单的样式,
效果:
我们再给红色div设置float:left
效果
我们可以看到BFC内部的Box会在垂直方向,一个接着一个的排列,即使浮动也是如此,而box垂直方向的距离有margin决定的。
我们让黄色div变成BFC,添加over-flow:hidden
效果:
这就说明了:BFC的区域不会与float重叠。
然后我们给body添加背景色,删掉不必要的代码,给第一个div添加一个margin-bottom:50px。
效果:
我们再给第二个div添加一个margin-top:50px
效果:
咦?两个div的间距怎么没改变呢?因为这两个div属于同一个BFC,由此可明属于同一个BFC的两个相邻Box的margin会发生折叠 。那怎么才能解决呢?其实很简单,既然两个div在属于同一个BFC的时候会发生margin折叠,那么我们不让他们处于同一个BFC不就行了吗?那怎样才能不在同一个BFC呢。
我们给第二个div添加一个盒子,
代码:
效果:
给class:father设置overflow:hidden就可以解决margin折叠了
接下来再看下一个
我们写一个div,里面再嵌套两个div
代码:
效果:
哟,高度塌陷了,父元素没有被撑开?然而我们只要给父级设置overflow:hidden触发BFC就可以解决高度塌陷了
效果:
所以计算BFC的高度时,浮动元素也参与计算。
- 浅谈BFC
- 浅谈BFC
- 浅谈BFC
- 浅谈BFC
- 浅谈BFC和IFC
- 浅谈CSS BFC及其应用
- 浅谈BFC块状格式化上下文环境
- 浅谈BFC—CSS的低调大佬
- BFC
- BFC
- BFC
- BFC
- BFC
- BFC
- BFC
- BFC
- BFC
- BFC
- mybatis缓存和延迟加载
- 8皇后问题————暴力解决
- u3d最多支持.net 3.5的dll或代码
- shell 语句中条件判断常用值
- hihocoder #1323 : 回文字符串
- 浅谈BFC
- jquery 创建form 并提交
- Hadoop-2.8.0 开发环境搭建(Mac)
- RecyclerView 多布局问题
- VS配置环境相关参数详解
- 符号数与非符号数的小小区别
- 判断字符串时间大小
- 第一篇博客的文章
- Spring-MVC入门-spring表单提交中文乱码解决