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

原创已于 2022-07-02 07:25:54 修改 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

于 2022-07-01 19:43:50 首次发布

css 专栏收录该内容

51 篇文章

订阅专栏

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

网上很多关于圣杯和双飞翼布局的教程, 我看了下实现都是需要中间的三个元素 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>

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;
}

接着, 设置 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;
  }
}

在这里插入图片描述

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