CSS：两列布局

两列布局是指一列宽度固定，另一列自适应。效果如下：

HTML:

<div class="container clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>
1
2
3
4

公共 CSS：

.container {
  width: 400px;
  height: 200px;
}

.left {
  width: 100px;
  height: 200px;
  background-color: orange;
}

.right {
  height: 200px;
  background-color: #d0e4fe;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

一. float 浮动

方法一：float + calc()

.left {
  float: left;
}

.right {
 float: left;
 width: calc(100% - 100px);
}

/* 清除浮动 */
.clearfix::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意事项：

如果父元素的高度没有设置，默认情况下，父元素的高度会被子元素撑高。如果子元素设置浮动，脱离文档流，就无法撑开父元素的高度，导致父元素高度塌陷，即父元素的高度变为 0，导致页面布局混乱。

示例如下：

<style>
  .container {
	width: 300px;
	border: 1px red solid;
  }
  .box1 {
	width: 100px;
	height: 100px;
	background-color: orange;
  }
  .box2 {
  	width: 100px;
	height: 150px;
	background-color: #d0e4fe;
  }
</style>

<div class="container">
  <div class="box1"></div>
</div>
 <div class="box2"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

此时，父元素 container 的高度被子元素 box1 的高度撑开。

box1 开启浮动后，效果如下：

.box1 {
  float: left;
}
1
2
3

此时 box1 脱离文档流，父元素的高度塌陷为 0，导致标准流中的 box2 位置上移，与 box1 重叠。因此，开启浮动造成的父元素高度塌陷会影响浮动元素之后元素的布局。

解决方案：

1. 给父元素设置高度，可以避免高度塌陷，但也无法自适应子元素的高度。

2. 将父元素的 overflow 属性设置为非 visible 的值，如 hidden 来开启 BFC。

   BFC（Block Formatting Context） 是一个 CSS 概念。BFC 是指浏览器中创建的一个独立的渲染区域，这个区域拥有自己的渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。简单来说，BFC 就是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

3. 在高度塌陷的父元素最后增加一个空的 div，给其设置 clear: both; 清除浮动。

<div class="container">
  <div class="box1"></div>
  <div style="clear: both;"></div>
</div>
1
2
3
4

4. 给父元素添加 ::after 伪元素，再向元素添加一个空白的块元素，然后对其清除浮动，这样做和添加一个空的 div 的原理一样，可以达到相同的效果，而且不会在页面中添加多余的 div。

.clearfix {
  content: "";
  display: block;
  clear: both;
}
1
2
3
4
5

方法二： float + margin-left

.left {
  float: left;
}

.right {
  margin-left: 100px;
}
1
2
3
4
5
6
7

二. position 定位

方法三： absolute + margin-left

.left {
  position: absolute;	/*开启定位脱离文档流*/
}

.right {
  margin-left: 100px;
}
1
2
3
4
5
6
7

三. flex 布局

方法四：flex

.container {
  display: flex;
}

.right {
  flex: 1;	/* flex-grow: 1; */
}
1
2
3
4
5
6
7

flex 是 flex-grow，flex-shrink，flex-basis 三个属性的简写形式。flex: 1 表示将三个属性值设置为 1 1 auto。

• flex-grow：定义了 flex 子项如何分配多余的空间。默认值为0。值为 1 意味着该子项会等分多余的空间。
• flex-shrink：定义了当空间不足时，flex 子项如何缩小。默认值为 1 ，意味着该子项会等比例缩小。
• flex-basis：定义了 flex 子项的默认大小。默认值为 auto，意味着默认大小为内容大小。

或

.container {
  display: flex;
}
.left {
  flex: 1;
}
.right {
  flex: 4;
}
1
2
3
4
5
6
7
8
9

这种用法表示左列占容器宽度的 1/5，右列占 4/5，适用于左列不需要固定宽度值的情况。

四. grid 布局

方法五：grid

.container {
  dispaly: grid;
  grid-template-columns: 100px 1fr;
}
1
2
3
4

grid-template-columns: 100px 1fr; 表示左列宽度 100px，右列占据剩余空间。如果想要左列宽度根据内容大小自动调节，可设置为 grid-template-columns: auto 1fr;