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. react-router 4.0中跳转失灵

    在https://github.com/ReactTraining/history文档中,跳转是 用这种方法,但是,用了之后就存在这么一个问题,网址换了但是页面并没有刷新. 查了资料后,history ...

  2. intellij idea之git执行打标签(tag)和删除标签

    intellij idea 版本为2017.2.6 进入Version Control-->log 1.在之前版本中,右键,新建标签 2.输入标签名称,建议输入版本号的方式 3.push标签 由 ...

  3. 美年健康股票成交量和K线关系

    看下美年健康的股票,这次主要是研究下成交量和K线的关系,以最后5天为例子,股票下跌成交量降低,说明抛压很小,在最后3天,价格突破的时候,成交量是平时的两倍,说明有机构买入, 业绩部分还可以,全民健身是 ...

  4. FPGA数字鉴相鉴频器的开发记录

    1. 对于电机的锁相控制,需要对相差进行PI性质的环路滤波,但现有的锁相环中鉴频鉴相器输出为相差脉冲而非数字量,难以直接进行PI特性的环路滤波. 通过对晶振的非整数分频获取准确的参考时钟,基于触发器机 ...

  5. fiddler之弱网测试

    今天就说一下如何使用fiddler做弱网测试 1.首先要把手机的代理打开,这就不多讲了哈,不懂得话请点传送门:https://www.cnblogs.com/fuxinxin/p/9146693.ht ...

  6. [P2387魔法森林

    题面 题意: 给出一个图,边权有两维,a与b. 求1到n的一条路径使得路径经过的边的最大的a与b的和最小,输出最小之和. \(Solution:\) 如果做过这题,那么就显得很简单了很好想了. 又是想 ...

  7. 切换pip源的简便方法

    网上大部分帖子讲的都是打开配置文件修改,那样太麻烦了,其实只要一行命令搞定: pip config set global.index-url https://pypi.tuna.tsinghua.ed ...

  8. Visual Studio 2014安装包

    点击下载

  9. highcharts图表插件初探

    转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html HighCharts简介 Highcharts 是一个用纯JavaScrip ...

  10. android-ViewList的通用ViewHold

    在写ViewList的时候要写Adapter的时候,经常大量的代码都是差不多的. 1 ViewHold 2 if(convertView ==null ){}else{} 3 setTag 4 FIn ...