css日常记录

如何清除浮动？

https://juejin.cn/post/6901903789197197325#heading-7

常见布局

圣杯布局

浮动版圣杯布局

圣杯布局利用浮动、负边距、相对定位来实现。

父元素 container 设置左右 padding 空出左右两栏位置。
三栏均设置向左浮动，中间栏设置 width: 100%; ，即与父元素宽度一样，将左右两栏挤到下面。
设置 margin 属性为负值将左右两栏移到上面，margin-left: -100%; 可以上移到上一行最左边， margin-left: -100px; 可以上移到上一行最右边（100px 是右边栏宽度）。
利用相对定位，将左右两栏定位到两边。

<style>
.container {
  padding: 0px 100px;
  min-width: 300px;
  overflow: hidden;
}
.left {
  float: left;
  background-color: red;
  position: relative;
  left: -100px;
  margin-left: -100%;
  width: 100px;
}
.center {
  float: left;
  background-color: green;
  width: 100%;
}
.right {
  float: left;
  background-color: blue;
  margin-left: -100px;
  width: 100px;
  position: relative;
  right: -100px;
}
</style>
<template>
  <div class="container">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</template>

flex版圣杯布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      header > div {
        height: 50px;
      }

      footer > div {
        height: 50px;
      }

      main > div,
      nav > div,
      aside > div {
        height: calc(100vh - 100px);
      }

      .HolyGrail {
        display: flex;
        flex-direction: column;
      }

      header,
      footer {
        flex: 1;
        background: #666666;
        height: 100px;
      }

      .HolyGrail-body {
        display: flex;
        flex: 1;
      }

      .HolyGrail-content {
        flex: 1;
        background: #d6d6d6;
      }

      .HolyGrail-nav,
      .HolyGrail-ads {
        /* 两个边栏的宽度设为12em */
        flex: 0 0 12em;
        background: #77bbdd;
      }

      .HolyGrail-nav {
        /* 导航放到最左边 */
        order: -1;
        background: #ff6633;
      }
    </style>
  </head>
  <body>
    <div class="HolyGrail">
      <header><div>内容</div></header>
      <div class="HolyGrail-body">
        <main class="HolyGrail-content"><div></div></main>
        <nav class="HolyGrail-nav"><div>内容</div></nav>
        <aside class="HolyGrail-ads"><div>内容</div></aside>
      </div>
      <footer><div>内容</div></footer>
    </div>
  </body>
</html>