前端面试题 CSS之常见概念

BFC特性、触发条件与应用

  1. 特性

    • 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
    • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box叠加。
    • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
    • 计算BFC的高度时,浮动元素也参与计算。
  2. 触发条件

    • float 除了none以外的值
    • overflow 除了visible 以外的值(hidden,auto,scroll )
    • display (table-cell,table-caption,inline-block, flex, inline-flex)
    • position值为(absolute,fixed)
    • fieldset元素

      注:display:table也可,因为会在内部自动创建table-cell

  3. 应用

    • 在一个BFC中,margin会叠加,不想叠加,则为不想叠加的元素创建一个BFC即可
    • 布局,两栏布局,左边为浮动元素,右边为一个BFC,则不会与浮动元素重叠
    • 清除浮动,利用BFC会计算浮动元素高度,父元素触发BFC,自身可避免塌陷
gzdaijie            updated 2018-05-04 01:47:18

results matching ""

    No results matching ""