从0开始学习BFC
为什么需要BFC?
<style>
.red {
background: red;
}
.blue {
background: #1890ff;
}
.green {
background: green;
}
p {
margin: 20px 0;
}
</style>
<body>
<p class="red">1</p>
<p class="blue">2</p>
<p class="green">3</p>
</body>
最常见的问题就是margin折叠。div1和div2之间的间距是20px,而不是预想的40px。该问题创建BFC就可以解决，因为BFC不会影响其他元素的布局。
BFC是什么？
BFC：Box Formatting Context,直译为块级格式化上下文。在CSS2.1规范中定义的一个关于css渲染定位的概念。BFC是一个独立的渲染区域，规定该区域内部的box 如何布局，并且与这个区域的外部毫不想干。
在CSS2.1规范中，还定义了Inline formatting context（IFC）。CSS3中添加了G(grid)FC和F(flex)FC
如何创建BFC?
详情请看CSS2.1规范 https://www.w3.org/TR/CSS2/visuren.html#block-formatting
这里写个总结，满足以下条件之一的元素便会生成BFC。
- 根元素
- 浮动元素: float的值不为none
- 绝对定位元素: position的值为absolute或fixed
- 行内块元素: display: inline-block
- 表格单元格: display的值为table-cell，table-caption
- overflow的值不为visible的元素
- 弹性盒子 display:flex或inline-flex
BFC的规则是什么？
- 内部的box会在垂直方向上一个接一个放置。
- 垂直方向的距离有margin决定，属于同一个BFC的两个相邻box的margin会发生重叠，与方向无关。
- 每个元素的margin box的左边与包含块border box的左边相接触。存在浮动也是如此。
- BFC的区域不会与float的元素区域重叠。
- 计算BFC的高度时，浮动子元素也参与计算。
- BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面元素，反之亦然
回归问题
文章开头的问题？
三个div同属于一个BFC(此处是body)中,所以根据规则第二点，margin会发生重叠。
解决方案:
p标签外在添加一个容器，并设置属性overflow:hidden。这样就产生了3个BFC,3个p在3个不同的BFC中，就不会产生margin重叠的问题。
<style>
.red {
background: red;
}
.blue {
background: #1890ff;
}
.green {
background: green;
display: flex;
}
p {
margin: 20px;
}
.wrap {
overflow: hidden;
}
</style>
<body>
<div class="wrap">
<p class="red">1</p>
</div>
<div class="wrap">
<p class="blue">1</p>
</div>
<div class="wrap">
<p class="green">1</p>
</div>
</body>
除了margin重叠还有其他的作用吗？
- 清除浮动
<style>
.par {
border: 5px solid #fcc;
width: 300px;
/* display: inline-block; */
}
.child {
border: 5px solid #189ff0;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child">1</div>
<div class="child">2</div>
</div>
</body>
参考规则第五点，计算BFC的高度时，浮动子元素也参与计算。形成BFC后，par就会把浮动子元素的高度也计算进去。
- 不和浮动元素重叠
<style>
body {
width: 100%;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
/* overflow: hidden; */
}
</style>
<body>
<div class="aside"></div>
<div class="main">
</div>
</body>
形成自适应两列布局。应用了BFC规则第四点。
从0开始学习BFC的更多相关文章
- IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习保护API
IdentityServer4 ASP.NET Core的OpenID Connect OAuth 2.0框架学习之保护API. 使用IdentityServer4 来实现使用客户端凭据保护ASP.N ...
- 20145208 《Java程序设计》第0周学习总结
20145208 <Java程序设计>第0周学习总结 阅读心得 读了老师推荐的几个文章,虽然第四个文章"为什么一定要自学"报告资源不存在而无法阅读,其他的三篇文章都言之 ...
- Json.Net6.0入门学习试水篇
原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...
- Bootstrap3.0入门学习系列
Bootstrap3.0入门学习系列规划[持续更新] 前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...
- 自己从0开始学习Unity的笔记 I （C#字符串转换为数字）
我基本上从0开始学习编程,运算符基本上跳过,因为知道了 “=”这个符号相当于赋值,然后“==”才是等于,其他和普通运算符号差不都,也就跳过了. 最基础的赋值那种,我看了下代码,似乎没什么难度,估计新手 ...
- 从0开始学习 GITHUB 系列之「向GITHUB 提交代码」【转】
本文转载自:http://stormzhang.com/github/2016/06/04/learn-github-from-zero4/ 版权声明:本文为 stormzhang 原创文章,可以随意 ...
- 从0开始学习 GITHUB 系列之「GIT 速成」【转】
本文转载自:http://stormzhang.com/github/2016/05/30/learn-github-from-zero3/ 版权声明:本文为 stormzhang 原创文章,可以随意 ...
- 从0开始学习 GITHUB 系列之「加入 GITHUB」【转】
本文转载自:http://stormzhang.com/github/2016/05/26/learn-github-from-zero2/ 版权声明:本文为 stormzhang 原创文章,可以随意 ...
- 20145328 《Java程序设计》第0周学习总结
20145328 <Java程序设计>第0周学习总结 阅读心得 从总体上来说,这几篇文章都是围绕着软件工程专业的一些现象来进行描述的,但深入了解之后就可以发现,无论是软件工程专业还是我们现 ...
随机推荐
- Android 双屏异显
android双屏是克隆模式,如果要在第二屏幕显示不同内容,需要自定义一个Presentation类 1.先设置权限 (刚开始折腾很久没有效果,后来发现是没设置权限) <!-- 显示系统窗口权限 ...
- vue04 组件化开发 Vue自动化工具
5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网 ...
- Codevs P1017 乘积最大
P1017 乘积最大 题目描述 Description 今年是国际数学联盟确定的“2000——世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的 ...
- Django REST framework 分页
三种分页:根据页码.根据索引.根据加密 http://www.xx.com/courses/?page=1&size=10 http://www.xx.com/courses/?offset= ...
- 编译Openwrt的log
Openwrt配置: Target System (Ralink RT288x/RT3xxx) ---> Subtarget (MT7688 based boards) ---> Targ ...
- GlobalSign 多域型(SNAs) SSL 证书
GlobalSign 多域型(SNAs) SSL 证书 GlobalSign 多域型(SNAs) SSL 证书,有别于通配符 SSL 证书可以同时保护一个域名下所有的子域名网站,SANs 证书更进一步 ...
- Linux下几种文件传输命令
Linux下几种文件传输命令 sz rz sftp scp 最近在部署系统时接触了一些文件传输命令,分别做一下简单记录: 1.sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具 ...
- python浅拷贝与深拷贝
今天写程序,人为制造了一个由浅拷贝引起的bug,有必要归纳一下.先附上源代码: class PerformanceTest(object): def __init__(self): ....... s ...
- php ip伪装访问
打算做个采集,无记录下来备用 php的curl搞定ip伪装来采集内容.以前写过一段代码采集一个数据来处理.由于数据量过大,同一ip采集.经常被限制,或者列为黑名单. 写了段代码伪装ip,原理是,客 ...
- [bzoj2086][Poi2010]Blocks_单调栈_双指针
Blocks bzoj-2086 Poi-2010 题目大意:题目链接. 注释:略. 想法:首先,不难发现,如果连续的一段数的平均值不小于输入的k的话,这段数是满足题意的. 所以,我们再次简化一下:将 ...