BFC原理与清除浮动的关系
来源:互联网 发布:国产电视知乎 编辑:程序博客网 时间:2024/05/22 07:49
1. BFC(Block Formatting Context)
规定了块级盒子(block-level box)格式化的规则,是一个独立的渲染区域,且这个区域与外部不相关。
2. 哪些元素会生成BFC(根据这个规则,改变标签属性,激活BFCC,清除浮动)
- 根元素;
- float不等于none;
- position:absolute or fixed;
- display:inline-block, table-cell, table-caption, flex, inline-flex;
- overflow不为visible;
3. BFC布局规则
- 内部Box会在垂直方向,一个接一个地放置;
- Box垂直方向的间距,由margin决定,属于同一个BFC的margin会重叠;
- 每个元素的margin Box的左边,与包含border Box 的左边相接触,即使存在浮动也是如此;
- BFC的区域不会和float区域重叠;
- BFC就是页面上一个隔离的独立容易,容器里面的子元素不会受到外面元素的影响;
- 计算BFC的高度时,浮动元素也参与计算;
4. 例子:参照http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html中;
5. 小结
因为BFC
内部的元素和外部的元素绝对不会互相影响,因此, 当BFC
外部存在浮动时,它不应该影响BFC
内部Box的布局,BFC
会通过变窄,而不与浮动有重叠。同样的,当BFC
内部有浮动时,为了不影响外部元素的布局,BFC
计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
阅读全文
0 0
- BFC原理与清除浮动的关系
- 清除浮动与BFC
- BFC与清除浮动
- 清除浮动有关的BFC等知识
- CSS清除浮动原理(涉及BFC)和方法
- 怎样触发BFC清除浮动?
- 详谈BFC与清浮动的方法:
- css浮动与BFC
- CSS浮动与BFC
- 【css】笔记---BFC和清除浮动
- 清除浮动 overflow:hidden FC IFC BFC
- overflow解决浮动高度塌陷问题的原理--触发BFC
- 浮动与清除浮动
- 浮动与清除浮动
- 浮动与清除浮动
- 浮动与浮动清除
- 从图文混排到浮动之BFC清除浮动
- 浮动原理和清除浮动
- 2017 Multi-University Training Contest
- 用C++实现双向链表
- poj 2104 K-th Number (主席树)
- 妙用Linux 的后台任务
- noip系列 2004提高组 合并果子
- BFC原理与清除浮动的关系
- 树状数组的基本运用
- 树状数组的基本+运用(HDU1166-敌兵布阵)
- linux-10 日志的管理
- 树状数组的进阶运用(Stars 数星星)
- 线段树的基础递归的使用
- windows下打包QT程序成安装包2
- 线段树的基础非递归的使用
- array_map