BFC规范
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规范的更多相关文章
- 5月23日——谈谈对BFC规范的理解
一.什么是BFC? BFC(block formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动 ...
- 对BFC规范的理解
什么是BFC? BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域. ...
- 关于浮动&关于BFC规范&whyoverflow清除浮动
https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- 浅谈BFC和IFC
先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
- 浏览器的差距、ie6 ie7 ie8、符号、html css、BFC、
1.浏览器的差距 浏览器默认的字体是16px,谷歌的最小字体是12px,其他是10px 2.ie6.ie7.ie8. hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到 ...
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC
前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...
随机推荐
- BZOJ2554 color 【概率DP】【期望DP】
题目分析: 好题. 一开始看错题了,以为是随机选两个球,编号在前的染编号在后的. 但这样仍然能获得一些启发,不难想到可以确定一个颜色,剩下的颜色是什么就无关了. 那么答案就是每种颜色的概率乘以期望.概 ...
- npm 淘宝源
--------- npm: 淘宝源设置:npm config set registry https://registry.npm.taobao.org
- MT【286】最佳有理逼近
2017北大优秀中学生夏令营已知$\omega $是整系数方程$x^2+ax+b=0$的一个无理数根, 求证:存在常数$C$,使得对任意互质的正整数$p,q$都有$$|\omega-\dfrac{p} ...
- SHELL 脚本小技巧
脚本很简单,直接上功能介绍及脚本,可以做模板使用: 记录日志,记录脚本开始执行时间.结束时间 usage 函数,脚本需接参数执行,避免误执行,告诉用户,这个脚本的使用方法 加锁,创建锁文件,脚本不允许 ...
- [luogu4072][bzoj4518][SDOI2016]征途【动态规划+斜率优化】
题目分析 Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地.除第m天外,每一天晚上Pine都必须在休息站过夜.所以,一段路 ...
- Dynamic CRM 2015学习笔记(1)Azure 上安装 CRM 2015
今天终于在Azure上安装成功了CRM 2015,下面简单介绍下安装过程,以及出现问题的解决: 一. 配置AD, 安装IIS 参考下面的link,里面有详细的配置步骤 http://www.c-sha ...
- VSIX 插件右键菜单
vs2017 插件开发 环境 WIN10 VS2017 CMMT VSIX 参考资源: vs菜单命令ID速查 https://docs.microsoft.com/zh-cn/visualstudio ...
- 【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, }; 它表示一个迷 ...
- 通过jpa getResultList 获取查询到的内容
String sql = "select * from spatial_event "; Query query = em.createNativeQuery(sql); // q ...
- HDU3032 Nim or not Nim?
解:使用sg函数打表发现规律,然后暴力异或起来即可. #include <bits/stdc++.h> typedef long long LL; ; int a[N]; inline L ...