深圳公租房官网百度快照怎么优化排名
1、开启了BFC能解决什么问题？
- 给父元素开启BFC，其子元素不会再产生 margin 塌陷问题。
- 自己不会被其他浮动元素所覆盖。
- 就算其子元素浮动，元素自身高度也不会塌陷。
2、如何开启？
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格: table、 thead、 tbody、 tfoot 、 th 、td、tr、caption。
- overflow 的值不为 visible 的块元素
- 伸缩项目
- 多列容器
- column-span 为 all 的元素 (即使该元素没有包裹在多列容器中)
- display 的值，设置为 flow-root
例
1. 根元素（html）
2. 浮动元素 （元素的 float 不是 none）
3. 绝对定位元素 （ position 为 absolute 或 fixed）
4. 内联块 （ display: inline-block ）
5. 表格单元格 （ display: table; , display: table-cell; , display: table-caption;）
6. 具有overflow 且值不是 visible 的块元素.
7. 伸缩项目（把父容器变成伸缩容器，如 display:flex;）
8. column-span: all; column-span 属性指定某个元素应该跨越多少列。 例如 3列： column-span: 3; |三 三 三|
display: flow-root;总结
以上9种方式多多少少都有副作用，而display: flow-root;的副作用最低（就是部分浏览器不支持）。
BFC就是这样一个东东，不好下定义，但是可以举例说明。
喝水不忘挖井人，感谢尚硅谷教育的免费课程