美文网首页
BFC简单理解

BFC简单理解

作者: 歇歇 | 来源:发表于2018-05-18 16:44 被阅读14次

以前有提到过overfllow : hidden/auto可以清除浮动,这里生效的特性就是BFC,Block Formatting Contexts块级格式化上下文。

BFC简述

1. 功能
BFC特性可以让元素拥有一定的隔离性、独立性,使该元素不会影响到兄弟元素的布局。比如避免浮动元素父元素高度塌陷;比如避免相连的 div 在垂直上的外边距会发生叠加等。

2. 触发BFC特性

  • 浮动,float 除 none 以外的值
  • position(absolute,fixed)
  • display 为以下其中之一的值 inline-blocks,table-cells,table-captions
  • overflow 除了 visible 以外的值(hidden,auto,scroll)

3. BFC特性的功能

  • 防止外边距折叠(外边距折叠的规则:仅当两个块级元素相邻并且在同一个块级格式化上下文时,它们垂直方向上的外边距才会折叠)。demo
  • BFC 包含浮动的元素时,不会有高度塌陷的问题(清除浮动带来的影响,具体可以看文首提到的blog)。demo
  • BFC清浮动防兄弟浮动元素遮挡。demo

相关文章

  • BFC简单理解

    以前有提到过overfllow : hidden/auto可以清除浮动,这里生效的特性就是BFC,Block Fo...

  • BFC的简单理解

    做前端开发,当开始设计高级CSS设计时,不可避免会接触BFC(Block Formatting Context,块...

  • 神奇的BFC

    BFC(block formatting context):块级格式化上下文 简单地理解BFC就是一个HTML块并...

  • 关于 BFC 的布局应用:清除浮动、文字环绕

    关于 BFC 的布局应用:清除浮动、文字环绕 参考文档:理解CSS中BFC BFC(Block Formattin...

  • BFC

    一、BFC是什么 BFC(box formatting context),要了解BFC是什么需要先理解box和fo...

  • BFC

    BFC(块格式上下文) 简单理解就是具备BFC特性的元素 就像一个容器所包裹,容器内的元素在布局上不影响外面的元素...

  • CSS

    1.引入 2.权重 3.BFC 一、什么是BFC BFC(block formatting context):简单...

  • BFC理解

    Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block...

  • 理解BFC

    一、常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: ...

  • 理解BFC

    原文连接:https://zhuanlan.zhihu.com/p/25321647 一、常见定位方案 在讲 BF...

网友评论

      本文标题:BFC简单理解

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