前言

实现两栏布局也是一道经典的面试题，两栏布局即左边固定右边伸缩，要实现两栏布局的方式超过十种了，下面举例五种，用来抛砖引玉。

float+BFC

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>两栏布局</title>
        <style>
            /* 方法1  左元素固定宽度，向左浮动 右元素不设置宽度，会自动撑满，重叠问题可使用BFC解决 */
            /* float让元素脱离正常标准流控制，不再占有原来的位置，*/
            /* overflow: hidden是关键，也可改成其他能触发BFC均可解决 利用了BFC的特点：`BFC` 的区域不会与浮动元素发生重叠 */
			.left {
                width: 200px;
                height: 100px;
                background-color: red;
                float:left;
            }
            .right {
                height: 200px;
                background-color: blue;
                overflow: hidden;
            }

        </style>
    </head>
    <body >
		<div class="outer">
			<div class="left">左侧</div>
			<div class="right">右侧</div>
		</div>
    </body>
</html>

float+margin

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>两栏布局</title>
        <style>
			/* 方法2  左元素固定宽度，向左浮动 右元素不设置宽度，会自动撑满，使用margin-left */
			.left {
                width: 200px;
                height: 100px;
                background-color: red;
                float:left;
            }
            .right {
                height: 200px;
                background-color: blue;
                margin-left: 200px;
            }

        </style>
    </head>
    <body >
		<div class="outer">
			<div class="left">左侧</div>
			<div class="right">右侧</div>
		</div>
    </body>
</html>

flex

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>两栏布局</title>
        <style>
            /* 方法3 利用 `flex` 布局，左边元素固定宽度，右边的元素设置 `flex: 1` */
			.outer {
				display: flex;
			}
			.left {
				width: 200px;
				height: 100px;
				background: lightcoral;
			}
			.right {
				flex: 1;
				height: 200px;
				background: lightseagreen;
			}

        </style>
    </head>
    <body >
		<div class="outer">
			<div class="left">左侧</div>
			<div class="right">右侧</div>
		</div>
    </body>
</html>

左侧绝对定位

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>两栏布局</title>
        <style>
            /* 方法4 */
		    /* 利用绝对定位，父级元素设为相对定位。左边元素 `absolute` 定位，宽度固定。
            右边元素的 `margin-left` 的值设为左边元素的宽度值。 */
			.outer {
				position: relative;
			}
			.left {
				position: absolute;
				width: 200px;
				height: 100px;
				background: lightcoral;
			}
			.right {
				margin-left: 200px;
				height: 200px;
				background: lightseagreen;
			}

        </style>
    </head>
    <body >
		<div class="outer">
			<div class="left">左侧</div>
			<div class="right">右侧</div>
		</div>
    </body>
</html>

右侧绝对定位

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>两栏布局</title>
        <style>
            /* 方法5 */
            /* 利用绝对定位，父级元素设为相对定位。左边元素宽度固定，
            右边元素 `absolute` 定位， `left` 为宽度大小，其余方向定位为 `0` 。 也可以只设置left+top，但要记得设置宽高*/
			.outer {
				position: relative;
			}
			.left {
				width: 200px;
				height: 100px;
				background: lightcoral;
			}
			.right {
				position: absolute;
				left: 200px;
				top: 0;
				right: 0;
				bottom: 0;
				height: 200px;
				background: lightseagreen;
			}

        </style>
    </head>
    <body >
		<div class="outer">
			<div class="left">左侧</div>
			<div class="right">右侧</div>
		</div>
    </body>
</html>

总结

  1. float+BFC：第一栏float:left; overflow: hidden; 清除浮动显示第二栏
  2. float+margin：第一栏float:left；给第二栏设置margin-left
  3. flex：将第二栏flex设置为1
  4. 左边绝对定位：第一栏绝地定位；第二栏margin-left
  5. 右边绝对定位：第二栏绝对定位：left为第一栏的宽度；top: 0;left: 200px;right: 0;bottom: 0;

还有其他方式，比如 grid 、float+calc 、table+calc 就不一一举例了。

感谢小伙伴们的耐心观看，本文为笔者个人学习记录，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！