css float布局两列,CSS两列布局的多种方式

两列布局(一侧固定宽度，一侧自适应)，在工作中应该是经常使用到，可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式，欢迎大家补充。

absolute + margin 方式

固定

自适应

.container {

position: relative;

}

.sidebar {

position: absolute;

top: 0;

left: 0;

height: 300px;

width: 200px;

background: #67c23a;

}

.main {

margin-left: 200px;

height: 300px;

background: #e6a23c;

}

图片

修改 css 就可实现 位置调换，如下：

.sidebar {

right: 0;

/* ... */

}

.main {

margin-right: 200px;

/* ... */

}

图片

优点： 交换

固定

、

自适应

顺序 ，实现主要内容优先加载渲染。

缺点：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住下面的元素。需要给父盒子设置 overflow 属性。

float + margin 方式

固定

自适应

.sidebar {

float: left;

top: 0;

right: 0;

height: 300px;

width: 200px;

background: #67c23a;

}

.main {

margin-left: 200px;

height: 300px;

background: #e6a23c;

}

图片

也支持位置调换：

.sidebar {

float: right;

/* ... */

}

.main {

margin-right: 200px;

/* ... */

}

图片

缺点：不能实现主要内容优先加载渲染。

float + 负margin 方式

自适应

固定

.wrap {

float: left;

width: 100%;

}

.main {

margin-left: 200px;

height: 300px;

background: #e6a23c;

}

.sidebar {

float: left;

margin-left: -100%;

height: 300px;

width: 200px;

background: #67c23a;

}

图片

位置调换：

.main {

margin-right: 200px;

/* ... */

}

.sidebar {

float: right;

margin-left: -200px;

/* ... */

}

图片

flex 方式

自适应

固定

.container {

display: flex;

}

.main {

flex: 1;

height: 300px;

background: #e6a23c;

}

.sidebar {

flex: none;

/* height: 300px; */

width: 200px;

background: #67c23a;

}

这里有一点需要注意：.sidebar没有设置高度，会和.container保持一样的高度。.container的高度是被.main撑开的，也就是和.main高度一样。

图片

位置调换：

.container {

display: flex;

flex-direction: row-reverse;

}

图片

grid 方式

自适应

固定

.container {

display: grid;

grid-template-columns: auto 200px;

grid-template-rows: 300px;

}

.main {

background: #e6a23c;

}

.sidebar {

background: #67c23a;

}

这里.main和.sidebar高度不单独设置的话，也是同样的高度。

图片

位置调换：

.container {

display: grid;

grid-template-columns: 200px auto;

grid-template-rows: 300px;

grid-template-areas: 'a b';

}

.main {

grid-area: b;

background: #e6a23c;

}

.sidebar {

grid-area: a;

background: #67c23a;

}

图片

float + BFC 方式

固定

自适应

.sidebar {

float: left;

width: 200px;

height: 300px;

background: #67c23a;

}

.main {

overflow: hidden;

height: 300px;

background: #e6a23c;

}

图片

位置调换：

.sidebar {

float: right;

/* ... */

}

图片

这里让.main成为BFC主要是消除.sidebar因float带来的影响，只要能让.main成为BFC就行。

此外留给大家一个思考题，还有没有其他方式呢？