CSS：两列布局

本文主要是介绍CSS：两列布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

HTML:

<div class="container clearfix"><div class="left"></div><div class="right"></div>
</div>

公共 CSS：

.container {width: 400px;height: 200px;
}.left {width: 100px;height: 200px;background-color: orange;
}.right {height: 200px;background-color: #d0e4fe;
}

一. float 浮动

方法一：float + calc()

.left {float: left;
}.right {float: left;width: calc(100% - 100px);
}/* 清除浮动 */
.clearfix::after {content: '';display: block;height: 0;clear: both;visibility: hidden;
}

注意事项：

如果父元素的高度没有设置，默认情况下，父元素的高度会被子元素撑高。如果子元素设置浮动，脱离文档流，就无法撑开父元素的高度，导致父元素高度塌陷，即父元素的高度变为 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>

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

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

.box1 {float: left;
}

此时 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>

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

.clearfix {content: "";display: block;clear: both;
}

方法二： float + margin-left

.left {float: left;
}.right {margin-left: 100px;
}

二. position 定位

方法三： absolute + margin-left

.left {position: absolute;	/*开启定位脱离文档流*/
}.right {margin-left: 100px;
}

三. flex 布局

方法四：flex

.container {display: flex;
}.right {flex: 1;	/* flex-grow: 1; */
}

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/5，右列占 4/5，适用于左列不需要固定宽度值的情况。

四. grid 布局

方法五：grid

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

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

这篇关于CSS：两列布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---