十六、好看的网页当然需要布局啦 --- CSS 布局之浮动（2）- 清除浮动的方法及BFC简单了解

清除浮动

清除浮动就是要 清除浮动带来的影响 ，如果子元素设置了浮动，此时子元素不能撑开标准流的块级父元素

原因：子元素浮动后会脱标，即不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局。

如下图所示：如果是父子级标签，子级设置浮动 ，父级没有高度 ，后面的标准流盒子就会受到影响，显示到上面的位置

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>
      .top {
        width: 300px;
        background-color: #2ef663;
      }
      .bottom {
        width: 300px;
        height: 100px;
        background-color: #87ceeb;
      }
      .top .left {
        float: left;
        width: 130px;
        height: 150px;
        background-color: rgb(243, 139, 88);
      }
      .top .right {
        float: right;
        width: 130px;
        height: 150px;
        background-color: rgb(254, 15, 167);
      }
    </style>
  </head>

  <body>
    <div class="top">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

清除浮动的方法

（1）直接设置父元素的高度

上面由于浮动产生的 标准流元素上移 问题，可以给浮动的子元素的父级 设置高度 解决：

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>
      .top {
        width: 300px;
        height: 200px;
        background-color: #2ef663;
      }
      .bottom {
        width: 300px;
        height: 100px;
        background-color: #87ceeb;
      }
      .top .left {
        float: left;
        width: 130px;
        height: 150px;
        background-color: rgb(243, 139, 88);
      }
      .top .right {
        float: right;
        width: 130px;
        height: 150px;
        background-color: rgb(254, 15, 167);
      }
    </style>
  </head>

  <body>
    <div class="top">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

直接设置父元素的高度，看起来简单、方便，但在有些界面布局中，不能直接固定父元素的高度，如商品列表、热榜推荐等模块，这些数据不确定有多少，自然它的高度就无法确定，也就无法设置其高度。

（2）额外标签法

额外标签，顾名思义就是在 父元素内容 的最后添加一个块级元素，然后再给添加的块级元素设置 clear：both

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>
      .top {
        width: 300px;
        /* height: 200px; */
        background-color: #2ef663;
      }
      .bottom {
        width: 300px;
        height: 100px;
        background-color: #87ceeb;
      }
      .top .left {
        float: left;
        width: 130px;
        height: 150px;
        background-color: rgb(243, 139, 88);
      }
      .top .right {
        float: right;
        width: 130px;
        height: 150px;
        background-color: rgb(254, 15, 167);
      }
      .clearfix {
        clear: both;
      }
    </style>
  </head>

  <body>
    <div class="top">
      <div class="left"></div>
      <div class="right"></div>
      <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

上述代码能 清除左右两侧浮动的影响 ，但也有缺点，在页面中添加额外的标签，会让页面的 HTML 结构变得复杂

（3）单伪元素清除法

单伪元素清除法就是用 伪元素 替代额外标签，在项目中使用，直接给浮动元素的父级标签加类即可清除浮动。

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>
      .top {
        width: 300px;
        /* height: 200px; */
        background-color: #2ef663;
      }
      .bottom {
        width: 300px;
        height: 100px;
        background-color: #87ceeb;
      }
      .top .left {
        float: left;
        width: 130px;
        height: 150px;
        background-color: rgb(243, 139, 88);
      }
      .top .right {
        float: right;
        width: 130px;
        height: 150px;
        background-color: rgb(254, 15, 167);
      }
      .clearfix::after {
        content: '';
        display: block; /* 伪元素是行内元素，要求的是块级元素*/
        clear: both;
        /* 兼容性：在网页中看不到伪元素 */
        height: 0;
        visibility: hidden;
      }
    </style>
  </head>

  <body>
    <div class="top clearfix">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </body>
</html>

（4）双伪元素清除法

双伪元素清除法，能够 同时解决浮动与外边距塌陷问题 ，与单伪元素清除法一样，在项目中使用，直接给浮动元素的父级标签加类就可以清除浮动，同时解决外边距塌陷。

css 复制代码

      /* 解决外边距塌陷 ：父子标签都是块级元素，子级元素加margin会影响父级的位置*/
      .clearfix::before,
      .clearfix::after {
        content: '';
        display: table;
      }
      /* 清除浮动 */
      .clearfix::after {
        clear: both;
      }

（5）给父元素设置 overflow:hidden

最简单的方式是直接给父元素设置 overflow:hidden

css 复制代码

      .top {
        overflow: hidden;
        width: 300px;
        /* height: 200px; */
        background-color: #2ef663;
      }

BFC 简单了解

BFC （ Block Formatting Context ）块格式化上下文，是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

上面的解释有点官方了，简单理解，BFC 就是一个 独立的渲染区域 ，在它的内部，规定了块级盒子如何布局，而且与它的外部区域不相干。

下面列举了几个 创建 BFC 的方法：

html 标签 是 BFC 盒子
浮动元素 是 BFC 盒子
行内块元素 是 BFC 盒子
overflow 属性的取值不为 visible，如：auto、hidden

BFC 盒子常见的特点：

BFC 盒子会默认 包裹住内部的子元素 （标准流、浮动），此特点可以运用于清除浮动；
BFC 盒子本身与子元素之间 不存在 margin 的塌陷现象 ，基于此特点可以解决 margin 的塌陷