内容简介：1、 boxbox是css布局的基本单位，元素的类型和display属性决定了box的类型。不同的类型的盒子会参与不同的formatting context。block-level box :display属性为block、list-item(作为列表显示的元素)、table的元素会生成block-level box。
1、 box
box是css布局的基本单位，元素的类型和display属性决定了box的类型。不同的类型的盒子会参与不同的formatting context。
block-level box :display属性为block、list-item(作为列表显示的元素)、table的元素会生成block-level box。
2、formatting context
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
- BFC（block formatting context）为块级格式化上下文，他是一个独立渲染区域，并且只有block-level box参与，规定了block-level box内部的布局方式。
二、布局规则
1、内部的box会在垂直方向上一个接一个的放置
<div class="div1"></div> <div class="div2"></div> 复制代码
2、同一个bfc内，两个相邻box元素的margin会产生重叠，重叠距离为数值大的margin值
margin: 20px 0 ,给div2设置
margin: 30px 0
,此时div1和div2之间的间距为30px。
-
解决方式 让两个元素不属于同一个BFC
3、BFC区域不会与浮动元素重叠
<div class="left"></div> <div class="main"></div> 复制代码
此时main元素没有产生bfc,left元素浮动，效果如下：
overflow:hidden
变为bfc,效果如下：
4、计算BFC的高度时，浮动元素也参与计算
5、每个元素的margin box的左边， 与 包含块 border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
3、产生BFC的方式
1、overflow属性不是visible
2、float属性不为none
3、display属性为inline-block、table-cell、flex、inline-flex、table-caption
4、position为absolute、fixed
5、body根元素
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
《Unity3D网络游戏实战（第2版）》
罗培羽 / 机械工业出版社 / 2019-1-1 / 89.00元
详解Socket编程，搭建稳健的网络框架；解决网游中常见的卡顿、频繁掉线等问题；探求适宜的实时同步算法。完整的多人对战游戏案例，揭秘登录注册、游戏大厅、战斗系统等模块的实现细节。 想要制作当今热门的网络游戏，特别是开发手机网络游戏，或者想要到游戏公司求职，都需要深入了解网络游戏的开发技术。本书分为三大部分，揭示网络游戏开发的细节。 第一部分“扎基础”（1-5章） 介绍TCP网络游......一起来看看 《《Unity3D网络游戏实战（第2版）》》 这本书的介绍吧!
