标签：BFC 容器 学会 元素 浮动 分钟 table left
BFC的简介
BFC(Block Formatting Context) 块级格式化上下文，是用于布局块级盒子的一块渲染区域。 MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。 一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素 通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
BFC的形成
只要元素满足下面任一条件即可触发 BFC 特性：
- 根元素(即
<html>标签) - 浮动元素 float 不为 none （为
left、right） - 绝对定位元素 position 不为 static 或 relative。（为
absolute、fixed） - overflow 的值不为 visible 的块元素(为
auto、scroll、hidden) - display 的值为
inline-block、flex、grid、table、table-cell、table-caption..
BFC的特性
- 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
- 计算BFC高度时浮动元素也参于计算（重点）
- BFC的区域不会与浮动容器发生重叠（重点）
- BFC内的容器在垂直方向依次排列
- 元素的margin-left与其包含块的border-left相接触
- BFC是独立容器，容器内部元素不会影响容器外部元素
标签：BFC,容器,学会,元素,浮动,分钟,table,left 来源： https://www.cnblogs.com/crazy-rock/p/15727392.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。