html5三列布局,详解CSS多种三列自适应布局实现

前言

为了按照常规WEB布局，这里全部采用拥有header和footer模式进行左中右布局编写。

第一种：基于float实现

实现思路

常规思路，使左右两个Aside分别浮动至左右两侧即可

代码实现

这里是头部

这里是内容

* {

margin: 0;

padding: 0;

}

.clearfix {

zoom: 1;

&::after {

display: block;

content: ' ';

clear:both

}

}

html, body {

width: 100%;

height: 100%

}

.container {

width: 100%

height: 100%

header {

height: 80px;

background: rgba(0, 0, 0, 0.5)

}

footer {

height: 80px;

background: rgba(0, 0, 0, 0.5)

}

.middle {

height: calc(100% - 80px - 80px