布局之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.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有 ...
随机推荐
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- 【MySql】mysql 慢日志查询工具之mysqldumpslow
当使用--log-slow-queries[=file_name]选项启动时,mysqld写一个包含所有执行时间超过long_query_time秒的SQL语句的日志文件.获得初使表锁定的时间不算 ...
- Android面试收集录 数据库
1.SQLite数据库如何查询表table1的第20条到30条记录? select * from table1 limit 19,11 ==>从19开始,11个数据 2.如何才能将table ...
- uber司机已经激活了,就是还没有上传头
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Django调试models输出的SQL语句
django1.3在shell下,调试models变得更为简单了,不用像之前的版本,手工去调用django query,才能打印出之前的代码是执行的什么SQL语句. 1.3开始只需在settings. ...
- python 网络篇(计算机网络基础)
计算机网络的发展及基础网络概念 广播 主机之间“一对所有”的通讯模式,网络对其中每一台主机发出的信号都进行无 ...
- 关于缺失值（missing value）的处理---机器学习 Imputer
关于缺失值(missing value)的处理 在sklearn的preprocessing包中包含了对数据集中缺失值的处理,主要是应用Imputer类进行处理. 首先需要说明的是,numpy的数组中 ...
- Python 3 学习笔记之——键盘输入和读写文件
1. 键盘输入 Python提供了 input() 内置函数从标准输入读入一行文本,默认的标准输入是键盘.input 可以接收一个 Python 表达式作为输入,并将运算结果返回. str = inp ...
- 编译 TensorFlow 的 C/C++ 接口
TensorFlow 的 Python 接口由于其方便性和实用性而大受欢迎,但实际应用中我们可能还需要其它编程语言的接口,本文将介绍如何编译 TensorFlow 的 C/C++ 接口. 安装环境: ...
- 了解游戏编程与 AI
噫语系列... 闲话 最近在重写我的一个 QQ 群机器人项目,并尝试将它改成更通用的结构,以方便在未来加入对 Wechat 和 Telegram 的支持. 在查资料的过程中,发现很多人认为一个群内多人 ...