布局之BFC
BFC
什么是BFC，在哪里需要用到BFC，BFC有什么规则？生成BFC有什么条件？这几个问题，我将为大家一一解释，下面我们进入正题。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
有什么用处
1.自适应两栏布局
2.清除内部浮动
3. 防止垂直 margin 重叠
规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
哪些元素可以生成BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
两栏布局
<style>
body {
width: 300px;
border:1px solid red;
}
.list{
width: 100px;
height: 150px;
float: left;
background: #4096ee;
}
.main {
height: 200px;
background: #ccc;
overflow:hidden
}
</style>
<body>
<div class="list"></div>
<div class="main"></div>
</body>
这样写，而list和main就会左边固定，右边自动伸缩的自适应了，我们在写移动端项目的时候，经常会使用到这种布局不是吗？
根据上面写的bfc生成规则第三条，我们给main加上了overflow不为visible的属性，那么就触发了生成BFC的条件。
在写这篇BFC的时候，脑子里想的KFC，哈哈哈。。。
BFC还可以清除浮动
<style>
.par {
border: 3px solid #ccc;
width: 150px;
}
.a {
border: 3px solid #4096ee;
width:50px;
height: 50px;
float: left;
}
</style>
<body>
<div class="par">
<div class="a"></div>
<div class="a"></div>
</div>
</body>
这种情况我们是不是经常会遇到，一般我们都是用clear:both,或者使用伪类：after清除的浮动（使用伪类的会更多吧），但是，现在你也可以使用BFC来达到同样的效果了。
我们给.par加一个属性上去，比如还是我们之前用到的overflow:hidden，我们来看看效果：
本人对BFC还不是特别深入了解，所以只能为大家简单的分析，以后对BFC有新的认识了，我会再来补充这篇文章。谢谢大家的支持。
布局之BFC的更多相关文章
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
- CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- 页面布局之BFC 微微有点坑
一.什么是BFC: 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...
- 样式布局与 BFC
一.几类视图 内联视图:inline 单行 块级视图:block 换行,有高度 行内块级视图:inline-block 单行,有高度 二.几类布局 块级布局 换行,通过设置 margin 水平居中 & ...
- 分析CSS布局中BFC
1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...
- CSS布局基础--BFC
1,什么是BFC BFC(Block Formatting Context)块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局. ...
- CSS布局之BFC和IFC
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...
- CSS 布局和 BFC
什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...
- 布局复习---BFC
其实在一开始我是没有BFC的这个概念的,只是知道在浮动过后,后续的元素如果出现问题,就做我们常说的:overflow:hidden.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有 ...
随机推荐
- 如何保证HashMap线程安全
可使用Java 1.5推荐的java.util.concurrent包ConcurrentHashMap来实现,内部不再使用类似HashTable的synchronized同步锁,而是使用Reentr ...
- vux用法
其实官网写的很详细了 但是好多时候没有仔细看的耐心 下面基本也是vux官网步骤: 很多人需要$t未定义问题 其实按着官网来就能解决这个报错: 如果你遇到 $t 报错问题,请不要开 issue,升级 v ...
- Django入门与实战
第1章 介绍课程目标及学习内容 1-1 课程介绍: 第2章 课前准备 2-1 课前准备: 第3章 开发环境搭建 3-1 开发环境搭建: 第4章 创建项目及应用 4-1 创建项目,并了解项目目录下的部分 ...
- 官方文档 恢复备份指南七 Using Flashback Database and Restore Points
本章内容: Understanding Flashback Database, Restore Points and Guaranteed Restore Points Logging for Fla ...
- Java项目启动时候报Neither the JAVA_HOME nor the JRE_HOME environment variable is defined 解决办法
今天在发布Java项目的时候又遇到 Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At leas ...
- lincode-58-四数之和
58-四数之和 给一个包含n个数的整数数组S,在S中找到所有使得和为给定整数target的四元组(a, b, c, d). 注意事项 四元组(a, b, c, d)中,需要满足a <= b &l ...
- 论 Web 前端加密的意义
论 Web 前端加密的意义 Web前端密码加密是否有意义? https://www.zhihu.com/question/25539382 https://blog.csdn.net/hla19910 ...
- [剑指Offer] 42.和为S的两个数字
题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. [思 ...
- 对于response.setContentType(MIME)的解释
response.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据.例如web浏览器就是通过MIM ...
- kali linux下的常用bash命令
虚拟机版本默认用户root 密码toor ls:显示当前目录包含的文件及文件夹 ls -l:以常规格式显示当前目录包含的文件及文件夹(开头字母解释:d:目录 -:文件 c:设备文件 l:链接 b:块设 ...