css-BFC

作者: O8 | 来源:发表于2018-01-24 13:36 被阅读0次

BFC?

ps:一开始看到这名词的时候我心里是拒绝的,什么鬼?

概念

(Block formatting context)直译为格式化上下文,它是一个独立的渲染区域。

布局规则

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

那些元素会形成BFC

  1. 根元素;
  2. float属性部位none;
  3. position为absolute和fixed;
  4. display为inline-block, table-cell, table-caption, flex, inline-flex;
  5. overflow不为visible;

有啥子用?

  1. 清除浮动;
<div class="container">
    <div class="item"></div>
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }

  .item {
    border: 3px solid #f66;
    height: 200px;
    width: 100px;
    float: left;
  }
</style>
浮动.jpg

若是用的float特性的话,很经常遇到这种撑不起父级高度的情况,这是可以用根据BFC的特性来解决它(6. 计算BFC的高度时,浮动元素也参与计算):

.container {
    border: 5px solid #fcc;
    overflow: hidden;
  }
浮动2
  1. margin重叠
  <div class="container">
    <p class="item"></p>
    <p class="item"></p>
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }
  .item {
    height: 200px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    background: #fcc;
  }
</style>
20px

设置div的边距为20px的则两个div垂直距离应该为40px;这个时候就发生了边距重叠了;(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)

让我们用BFC来解决他:

  <div class="container">
    <p class="item"></p>
    <div class="item-container">
      <p class="item"></p>
    </div>  
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }

  .item {
    height: 200px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    background: #fcc;
  }

  .item-container {
    overflow: hidden;
  }
</style>

此时我们用了div来单独把一个p给独立出来并且触发div的BFC,此时的两个p元素不在同一个BFC中也就防止了p元素之间的margin重叠;

记住BFC是一个隔离独立容器和他的特性,容器内的子元素不会影响到外面的元素。

相关文章

  • CSS-BFC

        block formatting context块级格式化上下文    bfc是一个独立的渲染区域,只有b...

  • css-BFC

    BFC? ps:一开始看到这名词的时候我心里是拒绝的,什么鬼? 概念 (Block formatting cont...

  • CSS-BFC

    先挖坑 参考链接

  • CSS-BFC

    Visual formatting model 是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS...

  • css-BFC

    BFC(block formatting context):块格式化上下文 理解BFC BFC和堆叠上下文都没有定...

  • CSS-BFC

    BFC box,Formatting Context在解释 BFC 是什么之前,需要先介绍 Box、Formatt...

  • BFC

    原文:[布局概念] 关于CSS-BFC深入理解 面试的时候尽量不讲定义,而是讲例子。 定义 BFC全称叫做(Blo...

  • CSS-BFC初探

    BFC 块格式化上下文(Block Formatting Context,BFC) BFC产生的条件 根元素 元素...

  • CSS-BFC的理解

    简介在使用CSS的过程中,经常会听到触发BFC,但是何为BFC。BFC(Block formatting cont...

  • 理解CSS-BFC(Block-Formatting-Conte

    前言 BFC 已经是一个耳听熟闻的词语了,但是我对于BFC的概念以及应用场景一直都不是很明白,据说搞懂BFC可以让...

网友评论

      本文标题:css-BFC

      本文链接:https://www.haomeiwen.com/subject/qqzyaxtx.html