什么是BFC

原创 2018年04月15日 13:15:07

块格式化上下文(block formatting context):我们无法去定义BFC到底是什么,就如同我们无法定义堆叠上下文一样,但当我们看到一种形式就能知道它是不是BFC,一个BFC有以下两个功能。

面试的时候不要解释BFC是什么,描述他的两个功能并举例!!

一、用BFC可以包住它内部的浮动元素

html:

<body>
<div class="baba">
  <div class="erzi">
  </div>
</div>
</body>

css:

.baba{
  border: 10px solid red;
  min-height: 10px;
  display: flow-root; /*触发BFC*/     //还可以使用float:left; position:absolute; display:inline-block; overflow:auto/hidden;  
}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

输出效果:


二、用 float + div 做左右自适应布局

html:

<body>
  <div class="gege">gege</div>
  <div class="didi">didi</div>
</body>

css:

.gege{
  width: 400px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 400px;
  border: 5px solid green;
  display: flow-root;  /*触发BFC*/
}

输出效果:




Open Source离我们有多远

与成功企业的企业文化常被人关注一样,去年以来Linux的成功吸引了许多关注Open Source文化的目光。然而令Open Source文化的倡导者们始料不及的是,在他们为此而欢呼时,不得不面对这样一...
  • terrywang
  • terrywang
  • 2000-12-24 11:23:00
  • 547

浅析BFC及其作用

一、什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文...
  • riddle1981
  • riddle1981
  • 2016-08-05 12:24:17
  • 8321

10 分钟理解 BFC 原理

一、常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照...
  • jiaojsun
  • jiaojsun
  • 2017-07-30 22:35:02
  • 905

bfc有那些特性,如何触发?

what:bfc格式化上下文,指一个独立的渲染区域。  bfc的特性:       内部的Box会在垂直方向上一个接一个的放置。       垂直方向上的距离由margin决定       b...
  • luuu7
  • luuu7
  • 2017-05-02 20:45:20
  • 1291

BFC模式

1、BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且...
  • sinat_36146776
  • sinat_36146776
  • 2016-10-20 16:53:28
  • 442

浅谈BFC和IFC

先说说FC,FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用...
  • mevicky
  • mevicky
  • 2015-07-22 21:47:56
  • 4860

深入理解BFC

该文章转载自:http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html 什么是BFC(Block formattin...
  • a250758092
  • a250758092
  • 2016-09-19 21:43:35
  • 1129

什么是BFC(初级入门介绍)

原文地址链接:http://div.io/topic/834?page=1#3261 说到BFC,就会涉及到CSS布局的一些基本概念,然后,首先来讲一下关于块级盒的一些概念: ...
  • tangxiaolang101
  • tangxiaolang101
  • 2016-09-23 17:47:37
  • 344

CSS之BFC、IFC、GFC和FFC

前言                                   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是...
  • tianxieliuhong
  • tianxieliuhong
  • 2016-11-28 11:02:49
  • 1254

CSS的BFC详解

一、BFC是什么?   在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。   Box: CSS布局的基本单位   Box 是 CSS 布局的对象和基本...
  • shadow_zed
  • shadow_zed
  • 2017-05-30 21:39:04
  • 984
收藏助手
不良信息举报
您举报文章:什么是BFC
举报原因:
原因补充:

(最多只允许输入30个字)