CSS 不需要清除浮动的圣杯布局~面试可能会问

CSS 不需要清除浮动的圣杯布局~面试可能会问
不需要清除浮动的圣杯布局

网上很多关于圣杯和双飞翼布局的教程, 我看了下实现都是需要中间的三个元素 float 布局而且需要清除浮动. 但是真的需要三个元素都 float 吗? 不清除浮动可以吗?

先看效果

 HTML
```
<header>header</header>
<main>
  <aside id="left">left</aside>
  <aside id="right">right</aside>
  <div id="main">main</div>
</main>
<footer>footer</footer>
1
2
3
4
5
6
7
```
HTML 的结构很清楚, 上中下分别是 header, main 和 footer, 和常见圣杯布局的是, main 中间区域和两边区域的位置.

从下图中可以看出来的是, 中间的 div 从 main 的第一个元素变成了最后一个元素. 这样写的目的是什么? 因为我们想要 div 显示在中间, 如果 div 前面的元素为 float, 那么后面的 div 自然就会正常显示, 即水平填满父容器宽度且上边界和父元素的上边界重合.

但是这样问题又来了, 因为中间的 div 被两侧的遮挡住了, 别急, 马上用请 CSS 帮忙.

CSS

首先重置 <body> 元素的默认 padding 和 margin 为 0, 并设置其高度为 100vh, 即浏览器视口 viewport 的高度.
```
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
1
2
3
4
5
```
接着, 设置 header 和 footer 的高度, 都固定为 70px.
```
header {
  height: 70px;
}
footer {
  height: 70px;
}
1
2
3
4
5
6
```
其次, 设置中间整个元素 <main> 的高度为父元素高度减去 header 和 footer 高度. 好了, 不需要清除浮动的原因出现了, 因为父元素的高度不是由子元素撑起的, 而是手动设置的.
```
main {
  height: calc(100vh - 140px);
}
1
2
3
```
接下来, 设置两个 <aside> 元素分别向左和右 float, 宽度都是 100px, 高度和父容器相同.
```
#left {
  float: left;
  width: 100px;
  height: 100%;
}

#right {
  float: right;
  width: 100px;
  height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
```
最后的大难题的解决就是设置 <main> 中间 div 的左右 padding 分别为左侧 <aside> 和右侧 <aside> 的宽度, 就保证其不会被遮挡. 当然别忘了高度和父容器保持一致.
```
#main {
  margin-left: 100px;
  margin-right: 100px;
  height: 100%;
}
1
2
3
4
5
```
优化一下代码, 为了防止窗口宽度很小导致 float 布局失效, 在屏幕宽度小于等于 300px(稍大于左右侧区域宽度之和) 时不显示左右侧区域并取消 <main> 中间 div 的 margin.
```
@media screen and (max-width: 300px) {
  #main {
    margin: 0;
  }
  #left, #right {
    display: none;
  }
}
1
2
3
4
5
6
7
8
```
感谢你看到这里, 祝福你也顺利通过面试, 找到心仪的工作😀
相关阅读:
高性能数据库连接池 HikariCP | HikariCP 配置详解
 GDAL+Java实现获取对应栅格影像经纬度对应的像素值
 图片地址GPS经纬度查询
 windows下flutter的环境安装
 使用重定向输入和输出创建子进程
 Windows编译Chrome浏览器【多图警告^-^】
SpringMVC的简单介绍及其使用
 《操作系统》模块五：内存管理
 PCN-224，PCN-224(H),CAS:1476810-88-4,金属有机骨架材料PCN-224(H)
MySQL报错：this is incompatible with sql_mode=only_full_group_by 解决方法
原文地址：https://blog.csdn.net/broken_promise/article/details/125564785

不需要清除浮动的圣杯布局

`HTML`

`CSS`