浅析CSS里的 BFC 和 IFC

2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com
分享到:

 

前端必备图书《Web安全开发指南 掌握白帽子的Web安全技能 从源头消除安全隐患 打造安全无虞的Web应用》 >> >> 

前言

之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference)

一 什么是 BFC

和之前所有博文一样,还是先从What的角度开始介绍,由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域,并且有一套渲染规则. 它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

而 Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素,反之也如此。

BFC的布局规则如下: 1 内部的盒子会在垂直方向,一个个地放置; 2 BFC是页面上的一个隔离的独立容器; 3 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ; 4 计算BFC的高度时,浮动元素也参与计算 5 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此; 6 BFC的区域不会与float重叠;

那么如何触发 BFC呢?只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素;
  • 浮动元素:float 不为none的属性值;
  • 绝对定位元素:position (absolute、fixed)
  • display为: inline-block、table-cells、flex
  • overflow 除了visible以外的值 (hidden、auto、scroll)

二 BFC的特性及应用

接下来介绍BFC常见的特性和应用,这一部分 在解释原因时,会用到上文的布局规则 和 触发条件,所以需要注意一下。

1 两个 相邻的普通流中的 块元素垂直方向上的 margin会折叠

<head>
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
</head> <body>
<div class="p"></div>
<div class="p"></div>
</body>

效果图是:

根据BFC规则的第3条:

盒子垂直方向的距离由margin决定, 属于 同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。

上文的例子 之所以发生外边距折叠,是因为他们 同属于 body这个根元素, 所以我们需要让 它们 不属于同一个BFC,就能避免外边距折叠:

<div class="p"></div>  

<div class="wrap">
<div class="p"></div>
</div>
.wrap {
overflow:hidden; .p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;

效果图是:

2 BFC可以包含浮动的元素(清除浮动)

正常情况下,浮动的元素会脱离普通文档流,所以下面的代码里:

<div style="border: 1px solid #000;">
<div style="width: 50px; height: 50px; background: #eee;
float: left;">
</div>
</div>

外层的div会无法包含 内部浮动的div,效果见下图:

但如果我们 触发外部容器的BFC,根据BFC规范中的第4条:计算BFC的高度时,浮动元素也参与计算,那么外部div容器就可以包裹着浮动元素,所以只要把代码修改如下:

<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

就可以完成以下效果:

3 BFC可以阻止元素被浮动元素覆盖

先看一个例子:

<div class="aside"></div>
<div class="main"></div> div {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}

效果图是: 之所以是这样,是因为上文的 规则5: 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;

所以要想改变效果,使其互补干扰,就得利用规则6 :BFC的区域不会与float重叠, 让 <div class="main"> 也能触发BFC的性质,即:

.main {
overflow:hidden;
height:200px;
background-color:red;
}

通过这种方法,就能 用来实现 两列的自适应布局。

三 简要介绍IFC

IFC布局规则:

1 框会从包含块的顶部开始,一个接一个地水平摆放。

2 摆放这些框时,它们在水平方向的 内外边距+边框 所占用的空间都会被考虑; 在垂直方向上,这些框可能会以不同形式来对齐: 水平的margin、padding、border有效,垂直无效。不能指定宽高;

3 行框的宽度是 由包含块和存在的浮动来决定; 行框的高度 由行高来决定

四 Refernce:

浅析CSS里的 BFC 和 IFC的更多相关文章

  1. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  2. CSS布局之BFC和IFC

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

  3. Css里的BFC

    一.BFC简介 BFC全称:Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的 ...

  4. CSS之BFC、IFC、FFC and GFC

    CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...

  5. css布局的各种FC简单介绍:BFC,IFC,GFC,FFC

    什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block ...

  6. BFC?来自CSS中的BFC

    浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...

  7. 初识 BFC、 IFC、GFC、FFC

    首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Con ...

  8. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

  9. 重拾 BFC、IFC、GFC、FFC

    温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...

随机推荐

  1. 单片机入门学习笔记5:STC下载器

    STC下载器主要集成了, 1.芯片识别,下载/编程 2.端口识别 3.串口助手 4.KEIL仿真设置 5.芯片选型 6.范例程序 (集成了定时器,串口等例程) 7.波特率计算器 8.定时器计算器 9. ...

  2. python代码notepad++不变色问题。

    原来是文档后缀名是.txt造成的,应该改成.py,疏忽了...

  3. c++ vector实例

    #include <iostream> #include <string> #include <vector> #include <iostream> ...

  4. CMSIS-DAP仿真器_学习(转载)

    先给大家普及一下,哈哈.CMSIS-DAP仿真器,是ARM官方做的开源仿真器,没有版权,自由制作.官方给的源代码,使用的是NXP的单片机LPC4320做的.这个源代码,只要你安装了KEIL5,就可以找 ...

  5. 记忆化搜索:POJ1088-滑雪(经典的记忆化搜索)

    skiing 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑 ...

  6. 水题:HDU1034-Candy Sharing Game

    解题心得: 1.我是用的模拟的算法直接模拟的每一轮的分配方法的得出的答案,看到有些大神使用的链表做的,好像链表才是这道题的镇长的做法吧. 题目: Candy Sharing Game Time Lim ...

  7. GBDT算法简述

    提升决策树GBDT 梯度提升决策树算法是近年来被提及较多的一个算法,这主要得益于其算法的性能,以及该算法在各类数据挖掘以及机器学习比赛中的卓越表现,有很多人对GBDT算法进行了开源代码的开发,比较火的 ...

  8. RF,GBDT,XGBoost,lightGBM的对比

    转载地址:https://blog.csdn.net/u014248127/article/details/79015803 RF,GBDT,XGBoost,lightGBM都属于集成学习(Ensem ...

  9. redis 之相关命令

    为什么缓存数据库更要首选redis?如何使用redis? 一.使用缓存数据库为什么首选用redis? 我们都知道,把一些热数据存到缓存中可以极大的提高速度,那么问题来了,是用Redis好还是Memca ...

  10. mongoTemplate学习笔记

    mongoTemplate的andExpression表达式 Aggregation<Post> agg = Aggregation.newAggregation( Record.clas ...