手机端html三栏式布局,CSS经典三栏布局方案

1. float布局

最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

此时可以得到左右两栏分布：

这里写图片描述

接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。(但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。)所以此时只需在container容器内添加一个正常的div，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

.main {

background-color: green;

height: 200px;

margin-left: 120px;

margin-right: 120px;

}

.container {

border: 1px solid black;

}

这里写图片描述

优势：简单

劣势：中间部分最后加载，内容较多时影响体验

2. BFC 规则

BFC(块格式化上下文)规则规定：B