BFC规范

BFC规范是什么?

BFC规范也叫块级格式化上下文。是指一个独立的容器。

如何触发BFC?

我们可以通过一下几种方式触发BFC

1.通过浮动触发:float(除none)

2.通过绝对\固定定位触发:position:absolute\flxed

3.通过display触发:display:inline-block\flex\table-cells

4.通过overflow触发:overflow:hidden\auto\scroll

什么时候需要触发BFC?

1、上下块级元素的margin相叠加的时候。

style:
.box1{
width: 300px;
height: 200px;
background: red;
margin:20px 0;
}
.box2{
width: 300px;
height: 200px;
background: blue;
margin:50px 0;
}
.box{
overflow: hidden;
} html:
<div class="box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></div>
</div>

2、解决margin传递问题

style:
.box1{
background: red;
border:1px solid #ccc;
overflow: hidden;
}
.box2{
width: 300px;
height: 100px;
background: blue;
margin-top:50px;
float: left;
} html:
<div class="box1">
<div class="box2"></div>
</div>

3.解决浮动问题

style:
.box1{
background: red;
border:1px solid #ccc;
overflow: hidden;
}
.box2{
width: 300px;
height: 100px;
background: blue;
float: left;
} html:
<div class="box1">
<div class="box2"></div>
</div>

4、解决覆盖问题

style:
.box1{
background: red;
width: 300px;
height: 100px;
border:1px solid #ccc;
float: left;
}
.box2{
overflow: hidden;
height: 300px;
background: blue;
} html:
<div class="box1"></div>
<div class="box2">154545</div>

可以实现左边固定,右边自适应的两栏布局。

BFC规范的更多相关文章

  1. 5月23日——谈谈对BFC规范的理解

    一.什么是BFC? BFC(block  formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动 ...

  2. 对BFC规范的理解

    什么是BFC? BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域. ...

  3. 关于浮动&关于BFC规范&whyoverflow清除浮动

    https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...

  4. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

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

  5. 浅谈BFC和IFC

    先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...

  6. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

  7. 浏览器的差距、ie6 ie7 ie8、符号、html css、BFC、

    1.浏览器的差距 浏览器默认的字体是16px,谷歌的最小字体是12px,其他是10px 2.ie6.ie7.ie8. hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到 ...

  8. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  9. 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC

    前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...

随机推荐

  1. Python中xlwt解析

    1.导入模块 import xlwt 2.构造excel表 workbook = xlwt.Workbook()                      #返回一个工作簿对象 3.构造sheet w ...

  2. [SP1043] GSS1 - Can you answer these queries I

    传送门:>Here< 题意:求区间最大子段和 $N \leq 50000$ 包括多组询问(不需要支持修改) 解题思路 线段树的一道好题 我们可以考虑,如果一组数据全部都是正数,那么问题等同 ...

  3. River Problem HDU - 3947(公式建边)

    River Problem Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  4. python学习日记(函数--装饰器)

    楔子 前提,我有一段代码(一个函数). import time def run_time(): time.sleep(0.1) print('我曾踏足山巅') 需求1:现在,我想计算这段代码的运行时间 ...

  5. Install Nagios (Agent) nrpe client and plugins in Ubuntu/Debian

    安装apt-get install nagios-nrpe-server nagios-plugins 修改nrpe.cfgvi /etc/nagios/nrpe.cfg修改Allow Host,添加 ...

  6. 记OI退役

    前言 (这篇本来在联赛前写了一点,但是一直没有发布.现在退役了,还是把它发出来留作纪念吧!) 其实,这篇随笔早该在停课时就写,可是我却迟迟没有动笔. 可能是我真的太懒了,或许也是我想要逃避自己内心的真 ...

  7. [ZJOI2016]大森林(LCT)

    题目描述 小Y家里有一个大森林,里面有n棵树,编号从1到n.一开始这些树都只是树苗,只有一个节点,标号为1.这些树都有一个特殊的节点,我们称之为生长节点,这些节点有生长出子节点的能力. 小Y掌握了一种 ...

  8. centos7/rhel7下配置PXE+Kickstart自动安装linux系统

    应用场景:临时安装一个系统或者批量安装linux系统,无需人工介入选择下一步,减少在安装系统上的时间浪费,提高工作效率. DHCP + TFTP + Syslinux + FTP + Kickstar ...

  9. Python中生成器generator和迭代器Iterator的使用方法

    一.生成器 1. 生成器的定义 把所需要值得计算方法储存起来,不会先直接生成数值,而是等到什么时候使用什么时候生成,每次生成一个,减少计算机占用内存空间 2. 生成器的创建方式 第一种只要把一个列表生 ...

  10. C# DateTimePicker控件获取他的年,月,日,时,分,秒

    CustomFormat属性设置为: yyyy-MM-dd HH:mm:ss 记住还要修改一个属性值,DateFormat属性 可选项改为Custom,默认是Long