三栏布局三种基本实现方法(浮动、定位、flex)

浮动

html部分

  <header>上</header>
  <div class="container">
    <aside>左</aside>
    <main>中</main>
    <nav>右</nav>
  </div>
<footer>下</footer>

css部分

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
header {
  background: #ddd;
  height: 50px;
}

nav {
  float: right;
  background:green;
  width: 200px;
  height: 400px;
}
aside {
  float: left;
  background:pink;
  width: 100px;
  height: 400px;
}
main {
  height: 400px;
  background: red;
  margin-left: 110px;
  margin-right: 210px;
}
footer {
  background: #ddd;
  height: 50px;
}

效果

定位(position)

html部分同上
css部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body {
  height: 100%;
}
.container nav {
  position: absolute;
  background: red;
  right: 0;
  top: 55px;
  width: 200px;
  height: 400px;
  
}
.container aside {
  position: absolute;
  background: blue;
  left: 0;
  top: 55px;
  width: 100px;
  height: 400px;
}
.container main {
  background: yellow;
  height: 500px;
  margin-left:110px;
  margin-right:210px;
}

header {
  height: 50px;
  background: pink;
  margin-bottom: 5px;
}

footer {
  background: purple;
  height: 150px;
  margin-top: 5px;
}

效果

Flex布局

html部分同上

css部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  background: #ddd;
  height: 50px;
}
.container {
  display: flex;
}
.container aside{
  background: pink;
  width: 100px;
}
.container main{
  flex-grow: 1;
  background: blue;
  height: 400px;
}

.container nav{
  background: green;
  width: 100px;
}

footer {
  background: #ddd;
  height: 50px;
}

效果