BFC

BFC的含义 :

Block Formatting Contexts(BFC) : 块级元素格式化上下文

它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系

块级元素:父级(是一个块元素)

内容:子元素(是一个块元素)

其他元素:与内容同级别的兄弟元素

相互作用:BFC里的元素与外面的元素不会发生影响

触发条件 :

  • 根元素或包含根元素的元素

  • 浮动元素(元素的 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 值为 flow-root 的元素

  • contain 值为 layout、content或 strict 的元素

  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)

  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)

  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 ``column-count 为 1)

  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

BFC的特点

在一个BFC中,垂直方向上,盒子是从包含块顶部开始一个挨着一个布局的,两个相邻的盒子的垂直距离是由margin属性决定的,在一个BFC中的两个相邻的块级盒子的垂直外边距会产生塌陷。
在一个BFC中,水平方向上,每个盒子的左边缘都会接触包含块的左边缘(从右向左的格式则相反)。除非出现浮动元素和其他元素相互作用的情况(当有浮动元素时,行盒可能因浮动元素而收缩,如果有盒子形成了新的BFC,那这个盒子也可能因浮动元素而变窄)。
这样我们终于知道为什么《精通CSS》里提到外边距塌陷时,为什么设置这么多的条件了:

处于文档流中的块级元素
垂直外边距直接相遇

其中第一个条件就是为了防止形成BFC,我们要注意的是BFC内部的子元素之间可以形成外边距塌陷,但BFC元素和其他块级元素是不能形成外边距塌陷的。

应用场景

自适应两栏布局
<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
清除浮动
<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
        overflow:hidden;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
防止垂直 margin 重叠
<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>
内容概要:该研究通过在黑龙江省某示范村进行24小时实地测试,比较了燃煤炉具与自动/手动进料生物质炉具的污染物排放特征。结果显示,生物质炉具相比燃煤炉具显著降低了PM2.5、CO和SO2的排放(自动进料分别降低41.2%、54.3%、40.0%;手动进料降低35.3%、22.1%、20.0%),但NOx排放未降低甚至有所增加。研究还发现,经济性和便利性是影响生物质炉具推广的重要因素。该研究不仅提供了实际排放数据支持,还通过Python代码详细复现了排放特征比较、减排效果计算和结果可视化,进一步探讨了燃料性质、动态排放特征、碳平衡计算以及政策建议。 适合人群:从事环境科学研究的学者、政府环保部门工作人员、能源政策制定者、关注农村能源转型的社会人士。 使用场景及目标:①评估生物质炉具在农村地区的推广潜力;②为政策制定者提供科学依据,优化补贴政策;③帮助研究人员深入了解生物质炉具的排放特征和技术改进方向;④为企业研发更高效的生物质炉具提供参考。 其他说明:该研究通过大量数据分析和模拟,揭示了生物质炉具在实际应用中的优点和挑战,特别是NOx排放增加的问题。研究还提出了多项具体的技术改进方向和政策建议,如优化进料方式、提高热效率、建设本地颗粒厂等,为生物质炉具的广泛推广提供了可行路径。此外,研究还开发了一个智能政策建议生成系统,可以根据不同地区的特征定制化生成政策建议,为农村能源转型提供了有力支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值