CSS—BFC原理解析与应用
我们在很多地方都见过BFC这个词，或许能够知道大概意思，但是有时候它的具体原理以及作用会记得很模糊，下面就对BFC这个概念深入学习下。
块级格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染部分，它是块级元素布局出现的区域，也是浮动层元素进行交互的区域，该区域是独立存在的，即BFC内部元素与外部元素之间不会相互影响。
BFC能够解决的问题
解决浮动定位
解决外边距合并
清除浮动
自适应多栏布局
......
BFC的创建方式
html元素或者包含html的元素
设置浮动属性的元素（display:none除外）
设置绝对定位属性的元素（absolute或者fixed）
display为inline-block、table-cell、table-caption的元素
设置overflow属性的元素（visible除外）
弹性盒子（flex布局）
栅栏布局元素（grid布局）
BFC存在的一些约束
- 内部Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定（或者：处于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关）
- 每个元素的左外边距与包含块的左边界接触（从左到右），即使浮动元素也是如此。（说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也要参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素和外部元素之间不会相互影响
BFC的应用
1.解决外边距合并
<!-- before：两个p元素处在同一BFC区域 -->
<style>
p{
width:100px;
height:100px;
margin:20px;
text-align:center;
line-height:100px;
background-color:lime;
}
</style>
<body>
<p>top</p>
<p>bottom</p>
</body>
<!-- after：让处在同一BFC区域的p元素处于不同的BFC区域 -->
<style>
div{
position:absolute; /* 让div成为BFC区域 */
}
</style>
<body>
<p>top</p>
<div><p>bottom</p></div>
</body>
2.解决浮动定位（让BFC区域内的浮动元素和其他未浮动元素等高）
<!-- before -->
<style>
#box{
margin: 50px;
background-color:#888;
border: 1px solid red;
}
.float{
float: left;
width: 200px;
height: 200px;
background-color:lime;
}
</style>
<div id="box">
<div class="float">浮动元素</div>
<div>未浮动元素</div>
</div>
<!-- after -->
<style>
#box{
margin: 50px;
background-color:#888;
border: 1px solid red;
overflow:hidden; /* 创建BFC */
}
.float{
float: left;
width: 200px;
height: 200px;
background-color:lime;
}
</style>
<div id="box">
<div class="float">浮动元素</div>
<div>未浮动元素</div>
</div>
到这里，BFC的原理及应用就分析的差不多了，后续有新的理解再进行更新，谢谢！！！
CSS—BFC原理解析与应用的更多相关文章
- <HTML/CSS>BFC原理剖析
本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...
- BFC原理解析
BFC的概念 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 它是 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- CSS中包含块原理解析
CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...
- CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...
- CSS 盒模型、解决方案、BFC 原理讲解--摘抄
PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模 ...
- Atitit.html css 浏览器原理理论概论导论attilax总结
Atitit.html css 浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3. <We ...
- BFC 原理
BFC:Block-level box + Forating + Context; ------->块元素 决定其子元素如何定位, ...
- Webpack & The Hot Module Replacement热模块替换原理解析
Webpack & The Hot Module Replacement热模块替换原理解析 The Hot Module Replacement(HMR)俗称热模块替换.主要用来当代码产生变化 ...
随机推荐
- 使用Python爬取mobi格式电纸书
最近做了个微信推送kindle电子书的公众号:kindle免费书库 不过目前电子书不算非常多,所以需要使用爬虫来获取足够书籍. 于是,写了以下这个爬虫,来爬取kindle114的电子书. 值得注意的地 ...
- Python-sympy科学计算与数据处理(求极限及其它功能)
极限 其它功能
- 【JAVA系列】使用JavaScript实现网站访问次数统计代码
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]使用JavaScript实现网站 ...
- 【转】C# DataTable 导出 Excel 进阶 多行表头、合并单元格、中文文件名乱码
本文原创地址:http://blog.csdn.net/ranbolwb/article/details/8083983 ,转载请保留本行. 本例子是上一篇 DataTable 导出 Excel 的进 ...
- 记：SpringBoot项目莫名出现ClassNotFoundException
最近某个开发环境的某个应用,隔三差五出现了某某页面找不到,网上百度找了些同类的问题都是说jstl包与默认tomcat里的包冲突,但都感觉和我的问题不是很搭配(因为相同框架的其他项目都可以正常允许) 报 ...
- 7.编写mapreduce案例
在写一个mapreduce类之前先添加依赖包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu ...
- 【转帖】Ubuntu : apt-get 命令
Ubuntu : apt-get 命令 https://www.cnblogs.com/sparkdev/p/11339231.html ubuntu的 我一直不熟 感谢作者 总结的这么好 在学习一下 ...
- Excel输入公式后只显示公式却不计算如何解决？
在使用Excel函数公式的时候,您是否碰到过输入公式,按下Enter键之后,单元格仍只显示公式,而不显示计算结果. 工具/原料 Excel 教程以Excel2013为例 方法/步骤 教 ...
- Hive远程连接
HIVE的连接模式== 本地连接模式 直接启动hive命令 HIVE的远程连接 这里要启动HIVE的服务 thirft进行编写 hiveserver2 —- > 前台启动 后台启动 前台启动 h ...
- 解决mac启动springboot项目很慢的问题
1.打开终端输入: hostname 查看电脑名称 2.输入命令修改hosts文件 sudo vi /etc/hosts 3. 在127.0.0.1和::1后边分别增加你的电脑名称 127.0.0.1 ...