布局之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.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有 ...
随机推荐
- Android开发——Android系统启动以及APK安装、启动过程
0. 前言 从Android手机打开开关,到我们可以使用其中的app时,这个启动过程到底是怎么样的? 1. 系统上电 当给Android系统上电,在电源接通的瞬间,CPU内的寄存器和各引脚均会被 ...
- Android TextView 单行文本的坑
这是android系统的一个bug,描述如下:https://code.google.com/p/android/issues/detail?id=33868 具体来说就是当一个TextView设置了 ...
- js学习日记-常用正则符号参考
预定义类 量词 贪婪.惰性.支配性量词 前瞻 边界 RegExp是全局对象,RegExp.$1...$9是全局属性.当执行任意正则表达式匹配操作时,JavaScript会自动更新全局对象RegExp上 ...
- 多个excel合并（excel2007）
1.新建一个空的excel文件,在需要合并的目录下. 2.右键点击sheet1,点击查看代码 3.执行此段代码 Sub 合并当前目录下所有工作簿的全部工作表() Dim MyPath, MyName, ...
- fiddler显示出服务器IP方法
fiddler的配置中是看不到服务器的IP的 1.打开进入fiddler界面,按快捷键ctrl+r 或者按照图中点击,进入customrules.js文件里. 2.在customrules.js文件里 ...
- Spring实战第五章学习笔记————构建Spring Web应用程序
Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...
- 目标检测之Faster-RCNN的pytorch代码详解(模型训练篇)
本文所用代码gayhub的地址:https://github.com/chenyuntc/simple-faster-rcnn-pytorch (非本人所写,博文只是解释代码) 好长时间没有发博客了 ...
- MySQL统计数据库大小
select concat(truncate(sum(data_length)/1024/1024,2),'mb') as data_size, concat(truncate(sum(max_dat ...
- 【PHP】- Apache设置
Apache配置 1.首先新建一个自己的amp目录(模仿wampserver安装目录),以后的apache,mysql,php都放在此目录下. 2.下载apache 根据自己的系统下载相应的压缩包,我 ...
- 用户代理UA
简介: 用户代理英文全称为User Agent,简称UA,现在被广泛用来标识浏览器客户端信息. 发展状况: User Agent在互联网早期就已经存在,那时互联网是完全基于文本的,用户直接浏览器互联网 ...