十五、好看的网页当然需要布局啦 --- CSS 布局之浮动（1）

标准流

标准流 或者可以称为 文档流 ，是浏览器在渲染显示网页内容时默认采用的一套排版规则，它规定了应该以哪种方式排列元素。

常见的标准流排版规则有以下两种：

块级元素：从上往下，垂直布局，独占一行
行内元素 / 行内块 元素：从左往右，水平布局，如果空间不够，就会自动换行

浮动的作用

浮动最开始被用来做图文环绕的，就是在一段文字的合适的地方插入图片

现在通常用来做网页布局 ，例如让两个垂直布局的盒子变成水平布局：

水平布局形式，使用行内块元素或行内元素也能实现，但是，浏览器在解析行内块 或行内标签的时候，如果标签换行书写会产生一个空格的距离

浮动如何设置及其有什么特点

浮动的属性名是 float ，分 左浮动 （left）和 右浮动（right）：

浮动的特点：

浮动元素会脱离标准流，就是我们常说的脱标，在标准流中 不占位置 ，就相当于从地面飘到了空中
浮动元素比标准流中的元素高半个级别，它可以覆盖标准流中的元素
浮动元素的布局位置，是浮动找浮动，下一个浮动元素会在上一个浮动元素的后面左右浮动
浮动元素有其特殊的显示效果：一行可以显示多个；也可以设置宽高
有一点需要注意，浮动元素没有 text-align:center 或 margin:0 auto

举例说明浮动的特点及用法

（0） 原始盒子布局

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }

        .center {
            width: 200px;
            height: 200px;
            background-color: rgb(126, 232, 211);
        }

        .bottom {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="center">center</div>
    <div class="bottom">bottom</div>
</body>

</html>

（1） 浮动的标签 --- 顶部对齐

html 复制代码

    <style>
        .top {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }

        .center {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(126, 232, 211);
        }

        .bottom {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
        }
    </style>

（2） 在一行排列，宽高生效 --- 浮动后的标签具备行内块特点

HTML 复制代码

    <style>
        .top {
            float: left;
            margin-top: 60px;
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }

        .center {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(126, 232, 211);
        }

        .bottom {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
        }
    </style>

布局案例

为了让浏览器的 执行效率更高 ，CSS 推荐书写顺序：

1）浮动 / 元素显示模式 display
2）盒子模型：margin 、border 、padding 、width 、height 、background-color
3）文字样式

（1） 简易的网页布局

完成上图的简易布局，每个人的模块拆分思路不一样，但最终效果都一样，下面是其中一种布局方式：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 40px;
            background-color: #333;
        }

        .box {
            margin: 0 auto;
            width: 1226px;
            height: 560px;
            background-color: #ffc0cb;
        }

        .left {
            float: left;
            margin-top: 100px;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: left;
            margin-top: 100px;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
 
</body>

</html>

设计图可以有多种拆分方式，上边代码是先将其拆成上下两大部分，然后再将下面的部分拆成左右两部分，最终实现的效果与原始布局一致

（2） 模拟网页商品列表布局

参照以上设计图，实现布局效果：

HTML 复制代码

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        margin: 0 auto;
        width: 1226px;
        height: 614px;
        /* background-color: rgb(202, 140, 150); */
      }
      .left {
        float: left;
        margin-right: 14px;
        width: 234px;
        height: 614px;
        background-color: #800080;
      }
      .right {
        float: right;
        width: 978px;
        height: 614px;
        /* background-color: rgb(159, 247, 190); */
      }
      ul {
        list-style: none;
      }
      li {
        float: left;
        margin-right: 14px;
        margin-bottom: 14px;
        width: 234px;
        height: 300px;
        background-color: #87ceeb;
      }
      li:nth-child(4n){
        margin-right: 0;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
</html>