BFC

什么是BFC，在哪里需要用到BFC，BFC有什么规则？生成BFC有什么条件？这几个问题，我将为大家一一解释，下面我们进入正题。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

有什么用处

1.自适应两栏布局

2.清除内部浮动

3. 防止垂直 margin 重叠

规则

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  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

两栏布局

<style>
body {
width: 300px;
border:1px solid red;
}

.list{
width: 100px;
height: 150px;
float: left;
background: #4096ee;
}

.main {
height: 200px;
background: #ccc;
overflow:hidden
}
</style>
<body>
<div class="list"></div>
<div class="main"></div>
</body>

这样写，而list和main就会左边固定，右边自动伸缩的自适应了，我们在写移动端项目的时候，经常会使用到这种布局不是吗？

根据上面写的bfc生成规则第三条，我们给main加上了overflow不为visible的属性，那么就触发了生成BFC的条件。

在写这篇BFC的时候，脑子里想的KFC，哈哈哈。。。

BFC还可以清除浮动

<style>
.par {
border: 3px solid #ccc;
width: 150px;
}

.a {
border: 3px solid #4096ee;
width:50px;
height: 50px;
float: left;
}
</style>
<body>
<div class="par">
<div class="a"></div>
<div class="a"></div>
</div>
</body>

这种情况我们是不是经常会遇到，一般我们都是用clear:both,或者使用伪类：after清除的浮动（使用伪类的会更多吧），但是，现在你也可以使用BFC来达到同样的效果了。

我们给.par加一个属性上去，比如还是我们之前用到的overflow:hidden，我们来看看效果：

本人对BFC还不是特别深入了解，所以只能为大家简单的分析，以后对BFC有新的认识了，我会再来补充这篇文章。谢谢大家的支持。

布局之BFC的更多相关文章

  1. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  2. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  3. 页面布局之BFC 微微有点坑

    一.什么是BFC: 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  4. 样式布局与 BFC

    一.几类视图 内联视图:inline 单行 块级视图:block 换行,有高度 行内块级视图:inline-block 单行,有高度 二.几类布局 块级布局 换行,通过设置 margin 水平居中 & ...

  5. 分析CSS布局中BFC

    1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...

  6. CSS布局基础--BFC

    1,什么是BFC BFC(Block Formatting Context)块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局. ...

  7. CSS布局之BFC和IFC

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...

  8. CSS 布局和 BFC

    什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...

  9. 布局复习---BFC

    其实在一开始我是没有BFC的这个概念的,只是知道在浮动过后,后续的元素如果出现问题,就做我们常说的:overflow:hidden.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有 ...

随机推荐

  1. P1823 音乐会的等待（单调栈）

    P1823 音乐会的等待 题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么 ...

  2. android .9图制作

    andorid .9 图,可用于适配各种屏幕.制作的时候,很简单. 在stadio 里面,把鼠标放到图片的边界,点一下.这时候,图片的边缘会有黑块. 然后把鼠标放到黑块上,发现可以拉伸区域了. 这个区 ...

  3. vi编辑图

    vi使用方法

  4. Scala学习笔记（三）：基础知识

    有了可运行的环境,就需要写一些简单的语句来认识一下Scala,本文没有写那么详细,只是为了方便查看.唤起回忆 (1)变量的定义方法 Scala有两种变量 var val 注意:在解释器中,可以用一个之 ...

  5. 云计算之路-阿里云上：原来“黑色0.1秒”发生在socket读取数据时

    在昨天的博文(云计算之路-阿里云上:读取缓存时的“黑色0.1秒”)中我们犯了一个很低级的错误——把13ms算成了130ms(感谢陈硕发现这个错误!),从而对问题的原因作出了错误的推断,望大家谅解! 从 ...

  6. linux ----- Vim进入和退出命令

    Vim进入和退出命令     本来不想写任何关于vim的文章的,无奈我今天又忘记怎么退出vim了,常用命令是ESC,然后:wq(保存并退出),:q!(不保存并强制退出),i进入vim模式.另外还有其它 ...

  7. ubuntu12.04停留在grub界面问题

    修改ubuntu 12.04 停留在grub界面的步骤: 1. 在/etc/default/grub配置文件中, 添加一项GRUB_RECORDFAIL_TIMEOUT: GRUB_TIMEOUT=2 ...

  8. Leetcode 672.灯泡开关II

    灯泡开关II 现有一个房间,墙上挂有 n 只已经打开的灯泡和 4 个按钮.在进行了 m 次未知操作后,你需要返回这 n 只灯泡可能有多少种不同的状态. 假设这 n 只灯泡被编号为 [1, 2, 3 . ...

  9. 字面值常量&&转义序列

    字面值常量举例: 字面值常量的分类 示例 备注 整型 42.024(八进制数).0x23(十六进制) short类型没有对应的字面值 浮点型 3.14.3.14E2(指数) 默认类型是double 字 ...

  10. [转]如何清空Chrome缓存和Cookie

    当您使用浏览器(例如 Chrome)时,浏览器会将网站中的一些信息保存在其缓存和 Cookie 中. 清除这些内容可以解决某些问题,例如网站上的加载或格式设置问题. 在 Chrome 中 在计算机上打 ...