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

- 日理万妓 2024-05-24 04:30 48阅读 0赞

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

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

先看效果  
![在这里插入图片描述][561e1d56dd6d408c979696bed9cc7b9b.png_pic_center]

### `HTML` ###

<header>header</header>
    <main>
      <aside id="left">left</aside>
      <aside id="right">right</aside>
      <div id="main">main</div>
    </main>
    <footer>footer</footer>

`HTML` 的结构很清楚, 上中下分别是 `header`, `main` 和 `footer`, 和常见圣杯布局的不同是, `main` 中间区域和两边区域的位置.

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

![在这里插入图片描述][3f038aec788843d5af69e3764253072f.png_pic_center]

![在这里插入图片描述][42f5f7781543476194c5969ef5e18709.png_pic_center]

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

### `CSS` ###

首先重置 `<body>` 元素的默认 `padding` 和 `margin` 为 `0`, 并设置其高度为 `100vh`, 即浏览器视口 `viewport` 的高度.

body {
        
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }

接着, 设置 `header` 和 `footer` 的高度, 都固定为 `70px`.

header {
        
      height: 70px;
    }
    footer {
        
      height: 70px;
    }

其次, 设置中间整个元素 `<main>` 的高度为父元素高度减去 `header` 和 `footer` 高度. 好了, 不需要清除浮动的原因出现了, 因为父元素的高度不是由子元素撑起的, 而是手动设置的.

main {
        
      height: calc(100vh - 140px);
    }

接下来, 设置两个 `<aside>` 元素分别向左和右 `float`, 宽度都是 `100px`, 高度和父容器相同.

#left {
        
      float: left;
      width: 100px;
      height: 100%;
    }
    
    #right {
        
      float: right;
      width: 100px;
      height: 100%;
    }

最后的大难题的解决就是设置 `<main>` 中间 `div` 的左右 `padding` 分别为左侧 `<aside>` 和右侧 `<aside>` 的宽度, 就保证其不会被遮挡. 当然别忘了高度和父容器保持一致.

#main {
        
      margin-left: 100px;
      margin-right: 100px;
      height: 100%;
    }

优化一下代码, 为了防止窗口宽度很小导致 `float` 布局失效, 在屏幕宽度小于等于 `300px`(稍大于左右侧区域宽度之和) 时不显示左右侧区域并取消 `<main>` 中间 `div` 的 `margin`.

@media screen and (max-width: 300px) {
        
      #main {
        
        margin: 0;
      }
      #left, #right {
        
        display: none;
      }
    }

![在这里插入图片描述][f2453da1309d4c3c8ba4daafd5805390.gif_pic_center]

感谢你看到这里, 祝福你也顺利通过面试, 找到心仪的工作?

[561e1d56dd6d408c979696bed9cc7b9b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/0fc96e26fab34935a958317c955c6b1d.png
[3f038aec788843d5af69e3764253072f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/4a5e7e51bec641149d18bc88594aca3d.png
[42f5f7781543476194c5969ef5e18709.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/6825b7261c3d48828fb8ee0d7e3606e5.png
[f2453da1309d4c3c8ba4daafd5805390.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/781366fadcc14f5faf10815061d284f7.gif