利用BFC（塊級格式化上下文）

BFC渲染規(guī)則

• 內(nèi)部盒子會在垂直方向，一個接一個地放置；
• 盒子垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰的盒子的margin會發(fā)生折疊；
• BFC區(qū)域不會與float盒子重疊；
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然；
• 計算BFC的高度時，浮動盒子高度也算；

創(chuàng)建BFC

• 根元素：html；
• 非溢出的可見元素：overflow不為visible；
• 設(shè)置浮動：float屬性不為none；
• 設(shè)置定位：position為absolute或fixed;
• 定義成塊級的非塊級元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

利用「BFC區(qū)域不會與float盒子重疊」「計算BFC的高度時，浮動盒子高度也算」

.container {
  overflow: auto;
}
.item1 {
  width: 100px;
  height: 100px;
  float: left;
}
.item2 {
  overflow: auto;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

利用脫離文檔流

如何脫離文檔流：

• float；
• 使用絕對定位（position: absolute;）或者固定定位（position: fixed;）；

.container {
  position: relative;
  height: 100px;
}
.item1 {
  position: absolute;
  width: 100px;
  height: 100px;
}
.item2 {
  margin-left: 100px;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

利用flex布局

.container {
  display: flex;
}
.item1 {
  width: 100px;
  height: 100px;
}
.item2 {
  flex-grow: 1;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

利用grid布局

.container {
  display: grid;
  grid-template-columns: 100px 1fr;
}
.item1 {
  width: 100px;
  height: 100px;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>