实践原因：element ui使用新标签，故看下区别

实践标签：section aside main

实验一：简单实践

<section>
    <aside style="width: 200px;height:100px;">aaa</aside>
    <main style="width: 200px">bbb</main>
</section>

alt

结论：

1、section似乎并没有什么特殊的区别，只是语义化方便理解。

2、aside和main是块元素

实验二：实现左右布局

<section style="display: flex; flex-direction: row">
      <div style="width: 200px;height:100px;border:solid">aaa</div>
      <div style="width: 200px;border:solid">bbb</div>
</section>

如果是块元素，那我直接将aside和main换成div来试试（不换也是一样的效果哦） alt

出现的疑问：

  • 变成流布局了。思考流布局对于块元素的改变？

需要注意的：

  • 注意diplay为flex，符合BFC条件,但是只是一级子元素为BFC。
  • 子元素的高度自适应了最大高度子元素的高度。（这很符合认知吧，容器小了我们就拿个大的来嘛）

虽然不仅是该实验的最终的结论：

  1. section aside main都是块元素，作用就是语义化了。
  2. 流布局可以使块元素失去独占一行的特性。
  3. 流布局符合BFC条件，一级子元素为BFC。
  4. 未固定定值高度，元素的高度自适应。