首页 > 其他 > 详细

BFC-块级格式化上下文

时间:2020-04-01 20:07:27      阅读:49      评论:0      收藏:0      [点我收藏+]
一、BFC ( 布局逻辑 ) 块级格式化上下文:
    BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
二、BFC布局规定:
    1:内部的Box会在垂直方向,一个接一个地放置;
    2:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置);
    3:每个元素的margin box的左边, 与包含块border box的左边相接触;
    4:BFC的区域不会与float box重叠;
    5:BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
    6:计算BFC的高度时,浮动元素也参与计算。
三、BFC触发条件:
    1:html 就是一个BFC;
    2: float属性不为none;
    3: position为absolute或fixed;
    4: display为inline-block, table-cell, table-caption, flex, inline-flex;
    5: overflow不为visible。

 

BFC-块级格式化上下文

原文:https://www.cnblogs.com/yh-3175339026/p/12615034.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!