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. BZOJ2554 color 【概率DP】【期望DP】

    题目分析: 好题. 一开始看错题了,以为是随机选两个球,编号在前的染编号在后的. 但这样仍然能获得一些启发,不难想到可以确定一个颜色,剩下的颜色是什么就无关了. 那么答案就是每种颜色的概率乘以期望.概 ...

  2. npm 淘宝源

    --------- npm: 淘宝源设置:npm config set registry https://registry.npm.taobao.org

  3. MT【286】最佳有理逼近

    2017北大优秀中学生夏令营已知$\omega $是整系数方程$x^2+ax+b=0$的一个无理数根, 求证:存在常数$C$,使得对任意互质的正整数$p,q$都有$$|\omega-\dfrac{p} ...

  4. SHELL 脚本小技巧

    脚本很简单,直接上功能介绍及脚本,可以做模板使用: 记录日志,记录脚本开始执行时间.结束时间 usage 函数,脚本需接参数执行,避免误执行,告诉用户,这个脚本的使用方法 加锁,创建锁文件,脚本不允许 ...

  5. [luogu4072][bzoj4518][SDOI2016]征途【动态规划+斜率优化】

    题目分析 Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地.除第m天外,每一天晚上Pine都必须在休息站过夜.所以,一段路 ...

  6. Dynamic CRM 2015学习笔记(1)Azure 上安装 CRM 2015

    今天终于在Azure上安装成功了CRM 2015,下面简单介绍下安装过程,以及出现问题的解决: 一. 配置AD, 安装IIS 参考下面的link,里面有详细的配置步骤 http://www.c-sha ...

  7. VSIX 插件右键菜单

    vs2017 插件开发 环境 WIN10 VS2017 CMMT VSIX 参考资源: vs菜单命令ID速查 https://docs.microsoft.com/zh-cn/visualstudio ...

  8. 【bfs】迷宫问题

    [题目描述] 定义一个二维数组: int maze[5][5] = { 0,1,0,0,0, 0,1,0,1,0, 0,0,0,0,0, 0,1,1,1,0, 0,0,0,1,0, }; 它表示一个迷 ...

  9. 通过jpa getResultList 获取查询到的内容

    String sql = "select * from spatial_event "; Query query = em.createNativeQuery(sql); // q ...

  10. HDU3032 Nim or not Nim?

    解:使用sg函数打表发现规律,然后暴力异或起来即可. #include <bits/stdc++.h> typedef long long LL; ; int a[N]; inline L ...