美文网首页
小结自己对BFC的理解

小结自己对BFC的理解

作者: 前端咸蛋黄 | 来源:发表于2019-02-20 16:18 被阅读0次

一、BFC概念

BFC的全称是块格式化上下文(Block Formatting Context,BFC)

  1. body 根元素
  2. 浮动元素:float 除 none 以外的值
  3. 绝对定位元素:position (absolute、fixed)
  4. display 为 inline-block、table-cells、flex
  5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

这些只是常见的,当然还有很多别的。

二、举例应用

  1. 父元素包住子元素

当子元素为float时会脱离文档流,通过触发BFC父元素包住浮动子元素,让浮动内容和周围的内容等高。

<div class="parent">
  <div class="son">子元素</div>
  <div>我是内容</div>
</div>
.parent{
  border:1px solid red;
  overflow: auto;/* 触发BFC */
}
.son{
  border:2px solid blue;
  width:300px;
  height:50px;
  float:left;
}
  1. 相邻元素隔离
    当兄弟元素为float时会脱离文档流,和其他兄弟元素重叠。通过触发BFC将兄弟元素隔离开。
<div class="parent">
  <div class="son1">子元素</div>
  <div class="son2">我是内容</div>
</div>
.son1{
  border:1px solid blue;
  width:300px;
  height:50px;
  float:left;
}
.son2{
  border:3px solid black;
  height:50px;
  overflow: auto;/* 触发BFC */
}

三、奇技淫巧

使用display: flow-root

一个新的display属性的值,它可以创建无!副!作!用!的BFC。

相关文章

  • 小结自己对BFC的理解

    一、BFC概念 BFC的全称是块格式化上下文(Block Formatting Context,BFC) body...

  • 对BFC的理解

    FC,即formatting context,格式上下文——————它是W3C CSS2.1规范中的一个概念,定义...

  • 对BFC的理解

    一.什么是BFC? 1、BFC全称Block Formatting Context ,中文直译为块级格式上下文。它...

  • 对 BFC 的理解

    BFC (Block Formatting Context) 是 CSS 中的一个概念,用于解决布局问题。它是一个...

  • 对BFC的理解,如何创建BFC

    先来看两个相关的概念: Box: Box 是 CSS 布局的对象和基本单位,⼀个⻚⾯是由很多个 Box 组成的,这...

  • 我对BFC的理解~

    前端7班+余愿 鉴于我对BFC的理解难度,我觉得有必要把我的理解过程记录并保存下来,以后忘了可以随时来翻翻,也可以...

  • 我对BFC的理解

    对css有了解的朋友肯定都知道盒式模型这个概念,对一个元素设置css,首先需要知道这个元素是block还是inli...

  • CSS面试题

    谈一谈你对 BFC/IFC 的理解 BFC 全称 Block Formatting Context,即块级格式化上...

  • BFC小结

    前言 BFC(Block Formating Context)块格式化上下文是CSS中比较常见的现象,下面简单介绍...

  • CSS 其他小点

    对BFC规范的理解? BFC,块级格式化上下文,一个创建了新的 BFC 的盒子是独立布局的,盒子里面的子元素的样式...

网友评论

      本文标题:小结自己对BFC的理解

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