布局

静态布局：指元素的位置和大小都是通过设置固定的像素值来实现的，不随窗口大小或内容变化而自适应。这种布局方式比较简单，但不够灵活，不能适应不同设备和不同浏览器窗口尺寸。
浮动布局：指通过设置元素的 float 属性来实现元素的排列和位置。浮动布局的优点是兼容性比较好，可以支持绝大多数浏览器，但浮动带来的副作用比较多，可能会影响元素的尺寸、位置和文本流等。
定位布局：指通过设置元素的 position 属性来实现元素的精确定位。定位布局的优点是可以实现高度精确的布局效果，但对于复杂的布局结构，需要手动设置每个元素的位置和大小，工作量比较大，且容易出现重叠等问题。
弹性布局（flex-box）：指通过设置容器的属性来实现子元素的自适应排列和大小。弹性布局的优点是适应性强，可以实现比例划分元素的宽高、显示顺序等效果，但兼容性比较差，只能兼容到 IE9 及以上版本的浏览器。
网格布局（grid）：指通过设置网格容器和子元素来实现元素的自适应排列和大小。网格布局的优点是可读性好、灵活性高，可以支持复杂布局结构，但兼容性不够好，需要考虑降级方案。
自适应布局（bootstrap）：指通过使用网格系统和响应式媒体查询来适应不同设备和窗口尺寸，使网页在不同设备上显示效果一致。自适应布局的优点是适应性好，可以支持各种设备和窗口尺寸，但当项目较为复杂时，维护多套 CSS 代码会比较麻烦。
多列布局：指通过设置多个列来实现元素的自适应排列和大小。多列布局的优点是可以支持分栏布局等效果，但需要考虑列数、列宽和间隔等因素。

静态布局

静态布局排列顺序通常是自上而下、自左到右的。

Content

vue

<template>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</template>

<style scoped>
.header {
  height: 100px;
  background-color: #ccc;
}

.sidebar {
  display: inline-block;
  width: 30%;
  height: 400px;
  background-color: #ddd;
}

.content {
  display: inline-block;
  width: 70%;
  height: 400px;
  background-color: #eee;
}

.footer {
  height: 50px;
  background-color: #ccc;
}
</style>

浮动布局 float

浮动元素会脱离文档流，不再占据原先的位置，文字会环绕在浮动元素附近，但任受其它浮动元素影响布局位置，浮动元素会自左向右排列，不够则换行，换行高度取决于当前行最高元素。

Content

浮动元素一

浮动元素二

浮动元素三

浮动元素四

浮动元素五

vue

<template>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar
      <p>侧边栏浮动</p>
    </div>
    <div class="content">Content
      <div style="float: left; height: 30px; width: 35%;background: #000">浮动元素一</div>
      <div style="float: left; height: 40px; width: 35%;background: #222">浮动元素二</div>
      <div style="float: left; height: 50px; width: 35%;background: #444">浮动元素三</div>
      <div style="float: left; height: 60px; width: 35%;background: #666">浮动元素四</div>
      <div style="float: left; height: 70px; width: 35%;background: #888">浮动元素五</div>
    </div>
    <div class="footer">Footer</div>
  </div>
</template>

<style scoped>
.header {
  height: 100px;
  background-color: #ccc;
}

.sidebar {
  float: left;
  width: 30%;
  height: 400px;
  background-color: #ddd;
}

.content {
  margin-left: 30%;
  height: 400px;
  background-color: #eee;
}

.footer {
  height: 50px;
  background-color: #ccc;
}
</style>

浮动布局会导致父容器高度塌陷，可通过以下方式解决：

父容器最后一个元素清除浮动；
开启 BFC；
父容器设置高度；

高度塌陷

利用最后一个元素清除浮动，这里用伪类 ::after。

开启 BFC，这里使用 overflow: hidden。

设置高度。

vue

<template>
  <div class="container">
    <div class="h-200 mb-10">
      <div class="content">
        高度塌陷
        <div class="sidebar h-200">Sidebar</div>
      </div>
    </div>
    <div class="content mb-10 clear-float">
      利用最后一个元素清除浮动，这里用伪类 ::after。
      <div class="sidebar h-200">Sidebar</div>
    </div>
    <div class="content mb-10 bfc">
      开启 BFC，这里使用 overflow: hidden。
      <div class="sidebar h-200">Sidebar</div>
    </div>
    <div class="content h-200">
      设置高度。
      <div class="sidebar h-200">Sidebar</div>
    </div>
  </div>
</template>

<style scoped>
.content {
  background-color: #ccc;
}

.sidebar {
  float: left;
  width: 30%;
  background-color: #ddd;
}
.clear-float::after {
  content: '';
  display: block;
  clear: both;
}
.bfc {
  overflow: hidden;
}
</style>

布局 ​

静态布局 ​

浮动布局 float ​

布局

静态布局

浮动布局 float