从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周学习总结 阅读心得 从总体上来说,这几篇文章都是围绕着软件工程专业的一些现象来进行描述的,但深入了解之后就可以发现,无论是软件工程专业还是我们现 ...
随机推荐
- MyBatis入门3_mapper.xml优化(parameterType简写_NameSpace简写_sql片段_特殊字符处理)_动态SQL
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! 优化 1.起别名(一般不用,写全方便查看类出处) 以前 ...
- python_文件io
# -*- coding:UTF-8 -*-#从键盘读入raw_input([prompt]) #函数从标准输入读取一个行,并返回一个字符串(去掉结尾的换行符)#input([prompt]) 函数和 ...
- js 判断 微信浏览器
<script type="text/javascript"> window.onload = function() { isWeixinBrowser(); } // ...
- 用 ilasm 反编译、修改.net dll文件
有些.net dll我们没有源码,如果要修改某些东西,可以用ilasm.exe反编译为il代码,修改后再编译回dll ilasm通常放在以下路径 C:\Windows\Microsoft.NET\Fr ...
- Django - orm字段类型介绍
1.根据类自动创建数据库表 #app.py下的models.py python manage.py makemigrations python manage.py migrate 执行完上述命令后,自 ...
- 2.Linux的用户、用户组、权限、文件系统管理及其网络配置
2.1 Linux的用户及用户组 2.1.1 Linux的用户管理 用户账号管理包含以下三个方面: 用户账号的添加.删除.与修改 用户口令(密码)的管理 用户组的添加.删除管理 Linux系统中用户信 ...
- / Vijos / 题库 /1250 / 最勇敢的机器人
/ Vijos / 题库 /1250 / 最勇敢的机器人 借鉴博客:http://www.cnblogs.com/chty/p/5830516.html 背景 Wind设计了很多机器人.但是它们都认为 ...
- Spring MVC 笔记 概述
学习笔记 模型:封装装程序数据 视图:渲染模型数据,一般来说就是输出HTML 控制:处理请求,构建模型并将其传递给视图进行渲染 以上三者均围绕DispatcherServlet设计,它处理所有的HTT ...
- Django-搭建win7虚拟环境-virtualenv
为什么要配置Django虚拟环境? 例如:在开发Python Django的时候,系统安装的Python3只有一个版本:3.6.所有第三方的包都会被pip安装到Python3的site-package ...
- 方便简单的远程控制：putty和WinSCP
记录一下WinSCP和putty的用法. putty:远程cmd窗口,在本机通过命令行操作服务器,并且拿到运行结果.而本机只有连接作用,大大减小了负担. 登陆界面输入ip地址,没有特殊情况,默认选项就 ...