• BFC (Block Fromatting Context, 即块级格式上下文)


    http://47.98.159.95/my_blog/css/008.html

    1.W3C对BFC的定义如下:

      浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的BFC。

    2.触发条件

    • 根元素()
    • 浮动元素(元素的 float 不是 none)
    • 绝对定位元素(元素的 position 为 absolute 或 fixed)
    • 行内块元素(元素的 display 为 inline-block)
    • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
    • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
    • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
    • overflow 值不为 visible 的块元素 -弹性元素(display为 flex 或 inline-flex元素的直接子元素)
    • 网格元素(display为 grid 或 inline-grid 元素的直接子元素) 等等。

    3.渲染规则

    (1)BFC垂直方向边距重叠

    (2)BFC的区域不会与浮动元素的box重叠

    (3)BFC是一个独立的容器,外面的元素不会影响里面的元素

    (4)计算BFC高度的时候浮动元素也会参与计算

    4.应用场景

    1. 防止浮动导致父元素高度塌陷

    2. 避免外边距折叠

  • 相关阅读:
    LeetCode: Tags-[Array], Difficulty-[Medium]
    J2SE 常用方法
    LeetCode: Tags-[Array], Difficulty-[Easy]
    Java Code Style 记录
    LintCode 1-30;
    Android在线程中发送GET和POST请求 在主线程更新UI
    Android中intent启动Activity中intent.setFlags()的作用
    源码备份 listview
    android数据库操作
    android 验证二
  • 原文地址:https://www.cnblogs.com/150536FBB/p/13475332.html
Copyright © 2020-2023  润新知