携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情 >>

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >>

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零

特点： 项目中使用，直接给标签加类即可，after用于清除浮动，before可以解决父元素塌陷问题。

块级格式化上下文(Block formatting context)：BFC是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。创建BFC的方法：html标签是BFC盒子浮动元素是BFC盒子行内块元素是BFC...

我们在之前的文章中已经掌握了CSS的大部分内容，但仍有一些内容我们没有涉略，这篇文章就是为了补充前面没有涉及的内容，为我们的知识做出补充并且介绍一些布局技巧...

当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园

备注： 在Uncaught Error: code length overflow情况下，创建时添加属性 correctLevel: 3就可以了

首先，我们在编辑器中，写上基础代码，当然要在 style 中加上一个 flex 类，用于 flex 布局的定义，这个是必然需要的，在此一定得加上。

这个时候直接顶部一个块，下面分为左中右三个块，然后就解决了，是不是很简单？相比刚刚那么这个简单多了。那就来做吧。