摘要：按照我的理解是我们在某一条件下会触发布局，会产生一定的效果。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。
BFC，全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局，会产生一定的效果。
Block Formatting Contexts翻译为：块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。
其中块级元素可以理解为父级元素，内容即是子元素，子元素也为块元素，其他元素指的是与内容同级别的兄弟元素，相互作用指的是BFC里的元素与外面的元素不会发生影响。
而触发BFC的条件是：
1、float的值不为none 2、overflow的值不为visible 3、display的值为table-cell、table-caption和inline-block之一 4、position的值不为static或者releative中任何一个
普通文档流的布局规则(一般像我这种新手没有布局意识的，就应该是普通文档流布局了。。。)
1、浮动的元素是不会被父级计算高度 2、非浮动元素会覆盖浮动元素的位置 3、margin会传递给父级 4、两个相邻的元素上下margin会重叠
BFC的布局规则
1、浮动的元素会被父级计算高度(父级触发了BFC) 2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC） 3、margin不会传递给父级（父级触发了BFC） 4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个多带带的父级，然后让他的父级触发了BFC）
实例：
hello1hello1
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116887.html
摘要：按照我的理解是我们在某一条件下会触发布局，会产生一定的效果。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。 BFC，全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局，会产生一定的效果。 Block Formatting Contexts翻译为：块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...
摘要：一正常流的行为正常流的排版行为依次排列，排不下了换行。在正常流基础上，有相关规则，使得一些盒占据了正常流需要的空间，可以把理解为文字环绕。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联...
阅读 2110·2021-09-28 09:45
阅读 3405·2021-09-24 09:48
阅读 2034·2021-09-22 15:49
阅读 2924·2021-09-08 16:10
阅读 2780·2021-09-04 16:45
阅读 398·2019-12-30 16:05
阅读 2370·2019-12-27 11:52
阅读 1316·2019-08-30 15:54
