布局之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.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有 ...
随机推荐
- Sql Server 表间对应关系
<1>.关联映射:一对多/多对一 存在最普遍的映射关系,简单来讲就如球员与球队的关系:一对多:从球队角度来说一个球队拥有多个球员 即为一对多多对一:从球员角度来说多个球员属于一个球队 即为 ...
- python2.7练习小例子（十五）
15):题目:输出指定格式的日期. 程序分析:使用 datetime 模块. 程序源代码: #!/usr/bin/python # -*- coding: UTF-8 -*- ...
- 初步学习pg_control文件之十二
接前问,初步学习pg_control文件之十一,再来看下面这个 XLogRecPtr minRecoveryPoint; 看其注释: * minRecoveryPoint is updated to ...
- spring data elasticsearch多索引查询
一次查询多个索引数据 es里可以这样写 GET 索引1,索引2,索引3/_search 也可以这样 给索引创建别名,多个索引可以使用一个别名 POST /_aliases { "action ...
- 关于springboot 连接mysql 数据库报错问题
springboot连接MySQL运行报错: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more ...
- https 通信流程和Charles 抓包原理
1. https 通信流程 ①客户端的浏览器向服务器传送客户端SSL 协议的版本号,加密算法的种类,产生的随机数,以及其他服务器和客户端之间通讯所需要的各种信息.②服务器向客户端传送SSL 协议的版本 ...
- 你可能会用到的"奇技赢巧"
工作中偶尔会遇到一些不常见的问题,但是解决起来又极其麻烦,通常要找很多资料才能搞定,这里我总结了近段时间遇到的一些问题,可能会对你有帮助,高手勿喷. 1.关于iPhone最下面会弹出奇怪框框的问题 就 ...
- SVN脱离锁定的几种方法
SVN经常出现被锁定而无法提交的问题,选择解锁又提示没有文件被锁定,很是头疼.这里整理了一下SVN 被锁定的几种解决方法: 1.出现这个问题后使用“清理”即"Clean up"功能 ...
- ubuntu 开热点
原文地址:https://www.cnblogs.com/king-ding/archive/2016/10/09/ubuntuWIFI.html 今天教大家一个简单方法让ubuntu发散wifi热点 ...
- Introduction to TCP/IP
目录 First Week DHCP 子网掩码 ip路由表 Second Week ipv4 ipv6 TCP和UDP Third Week NAT RPC FTP E-mail Fouth Week ...