美文网首页
BFC是盒子的特性

BFC是盒子的特性

作者: Ronswhite | 来源:发表于2019-06-14 11:10 被阅读0次

BFC是什么?

简单说BFC(Block Formatting Context)是块级元素的机制,需要在特定情况下才会激活。

激活的BFC

当一个块级盒子触发BFC之后,其内部形成独立环境,在里面做任何事都不会对盒子外部有影响。而且浮动的元素不会覆盖触发了BFC的盒子。

如何触发BFC

  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 positionabsolutefixed
  • 行内块元素(元素的 displayinline-block
  • overflow 值不为 visible 的块元素(常用overflow: hidden;
  • 等等。。。。。。

应用场景

解决外边距塌陷问题

BFC1.gif

解决浮动盒子撑不开父级元素的问题

BFC2.gif

制作自适应两栏效果

BFC3.gif

相关文章

  • BFC是盒子的特性

    BFC是什么? 简单说BFC(Block Formatting Context)是块级元素的机制,需要在特定情况下...

  • 多列布局思路

    首先阅读:BFC与多列布局 通过BFC特性:float + BFC盒子 通过margin回拉(用到float)或绝...

  • 关于css中BFC的理解

    1.BFC的理解:块格式化上下文2.BFC 特性(功能):(1).使用BFC可以取消盒子margin塌陷(over...

  • BFC

    1. BFC 1.BFC是什么 Span是盒子,div也是盒子。 所有的盒子都是FC,格式化上下文。 可能是BFC...

  • 什么是BFC,和清除浮动的原理

    bfc是什么 bfc元素表现的特性就是一个独立的盒子,内部的子元素再怎么折腾都不会影响外部的元素和父元素,如果触发...

  • BFC

    一、什么是BFC? bfc即:block formatting contexts,具有bfc特性的元素可以看作是隔...

  • 块状格式化上下文BFC

    BFC是什么? BFC,块状格式化上下文,其实是一个隔离的独立盒子(容器),他有以下特性: 容器里面的子元素不会影...

  • CSS 其他小点

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

  • 前端面试题之CSS(四)

    BFC 是什么?如何生成 BFC?有什么特性?BFC 有什么作用?举例说明 BFC(Block formattin...

  • 如何理解BFC原理?

    一、理解BFC概念 BFC是一个封闭独立的盒子,无论盒子里的元素怎么运作,都不会影响外部的元素,内部元素也不受外界...

网友评论

      本文标题:BFC是盒子的特性

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