BFC相关知识
一、什么是BFC
css布局主要采用盒子模型（BOX），元素的类型和 display 属性，决定了 Box 的类型，常见的盒子类型有两种：
- block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。
不同类型的BOX如何渲染是由Formatting context决定的,Formatting context是页面中的一个渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC(Block formatting context)直译为"块级格式化上下文"，它的作用对像是block-level类型的盒子，是页面上具有隔离功能的独立容器，它规定了其内部的Block-level Box如何布局，容器里面的子元素不会影响到外面的元素。
二、BFC布局规则
1.内部的Box在垂直方向一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.所有属于BFC的box都默认左对齐，并且它们的左边距可以触及到容器container的左边。浮动的box也不例外
4.BFC的区域不会与float box重叠。
这个看字面意思不好理解，直接看例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
font-size:12px;
}
.box{
width:300px;
overflow:auto;
}
.leftbox{
background:#CCC;
width:100px;
height:30px;
float:left;
}
.textbox{
width:200px;
background:#FFCCCC;
}
</style>
</head> <body>
<div class="box">
<div class="leftbox">浮动元素</div>
<div class="textbox">文字从这里开始，不会被浮动元素遮住</div>
</div>
</body>
</html>
5.计算BFC的高度时，浮动元素也参与计算
整个布局规则可以体现为下面这张图
三、哪些元素会生成BFC
根元素（也就是body元）
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
四、BFC应用场景
1.防止外边距合并，外边距合并的文章，请点这篇
2.清除子元素的浮动(子元素浮动后会引起父元素容器高度塌陷)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.par {
border: 5px solid blue;
width: 300px;
} .child {
border: 1px solid green;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
</div>
</body>
</html>
我们想要的效果如下图
代码执行后实际效果
为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。
BFC相关知识的更多相关文章
- 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- 移动WEB像素相关知识
了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...
- listener监听器的相关知识
从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...
- UIViewController相关知识
title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...
- 【转】java NIO 相关知识
原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...
- NSString使用stringWithFormat拼接的相关知识
NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ...
- iOS网络相关知识总结
iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...
- 电路相关知识--读<<继电器是如何成为CPU的>>
电路相关知识–读<<继电器是如何成为CPU的>> */--> *///--> *///--> 电路相关知识–读<<继电器是如何成为CPU的> ...
- 地址标记，SpringMVC转发与调用相关知识存档
1.mytest_mavenprj1中,index的 <a href="login/login.html">点击登录</a> 与 <a href=&q ...
随机推荐
- April 14 2017 Week 15 Friday
Try to be a rainbow in someone's cloud. 当乌云萦绕心头,我愿意成为你的彩虹. Actually there are many rainbows in our l ...
- ERROR 3077 (HY000): To have multiple channels, repository cannot be of type FILE; Please check the repository configuration and convert them to TABLE.
在5.7.16搭建多源复制时,出现如下错误: mysql> change master to master_host='192.168.56.156',master_user='repl', ...
- Poj(1703),种类并查集
题目链接:http://poj.org/problem?id=1703 已经不是第一次接触种类并查集了,直到今天才搞懂. 感谢红黑联盟,感谢杰哥!!! 每个节点只要关系确定,不管是不是同一个集合里面, ...
- veritas.com常用资源汇总
NetBackup 8.1.2文档(合集) https://www.veritas.com/support/en_US/article.100044086 NetBackup产品组停止支持生命周期 ...
- Angular2入门--架构概览
Angular 介绍 Angular 是一款来自谷歌的开源的web前端框架,诞生于2009年,是一款优秀的前端JS框架,已经被用于谷歌的多款产品. Angular 基于Typescript开发 ,更适 ...
- Java中JSON字符串与java对象的互换实例详解
这篇文章主要介绍了在java中,JSON字符串与java对象的相互转换实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JS ...
- java基础 数组 Set Map 集合综合应用 生成带0的随机字符串 "00000001" 水果商品号问题
package com.swift.test01; /*有四种水果(苹果,香蕉,西瓜,橘子) 1.给每种水果设定一个商品号,商品号是8个0-9的随机数,商品号码不能重复, 最小值 "0000 ...
- 工具类(为控件设置色值) - iOS
为了便于日常开发效率,因此创建了一些小的工具类便于使用.具体 code 如下:声明: /* 为控件设置色值 */ #import <UIKit/UIKit.h> @interface UI ...
- ReactiveCocoa实战: 模仿 "花瓣",重写 LeanCloud Rest Api的iOS REST Client.
这一次我们将要讨论的是移动开发中比较重要的一环--网络请求的封装.鉴于个人经验有限,本文将在一定程度上参考 基于AFNetworking2.0和ReactiveCocoa2.1的iOS REST Cl ...
- 【复杂度分析】loj#6043. 「雅礼集训 2017 Day7」蛐蛐国的修墙方案
感觉有点假 题目大意 数据范围:$n<=100$ 题目分析 由于题目给出的是 置换,所以相当于只需枚举每个环的两个状态. 主要是复杂度分析这里: 一元环:不存在 二元环:特判保平安 三元环:不存 ...