查漏补缺2-盒子阴影、清除浮动（clear, BFC）

盒子阴影

box-shaow的写法按照下图顺序：

需要注意的是：盒子阴影不会占用空间，不会影响其他盒子布局

清除浮动

此番理解完清除浮动后我个人希望将其分为两大类：

1. 使用clear清除浮动；
2. 创建新的BFC；
   下面做详细解释，所有的清除浮动方法都在下面的例子上操作：

  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="other"></div>

    .content {
      background-color: rgb(255, 218, 252);
    }

    .item {
      width: 200px;
      height: 200px;
      background: #f87;
      border-radius: 20px;
      float: left;
    }
    .other {
      width: 800px;
      height: 200px;
      background-color: rgb(168, 246, 165);
    }

现在的效果图如下，我们称之为高度塌陷：

下满需要清除浮动实现如下效果：

1. 使用clear清除浮动

首先理解clear属性的含义：clear属性规定元素的哪一侧不允许出现其他浮动元素。
clear: left/right/both,此处拿clear: left解释，给元素A设置该属性，则A元素左侧不允许出现浮动元素，如果左侧出现浮动元素该如何？向下寻找左侧没有浮动元素的位置。

a. 额外标签

HTML

  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="test"></div>	<!-- 添加的代码 -->
  <div class="other"></div>

CSS

.test {
      clear: left;
    }

新建的标签本该在图中所示位置，但是他左侧出现了浮动的元素，故向下寻找了其他归宿。
对于额外标签法，将标签写在浮动父盒子中也是可行的。

  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="test"></div><!-- 添加的代码 -->
  </div>
  <div class="other"></div>

我们先前给content设置了背景色，可以发现此时content盒子是被撑开了的，这很容易理解，test盒子在content内，在寻找左侧没有浮动的归宿时，也是在content盒子内部进行的。

b. 伪元素

在最初代码的基础上，只需要修改css，如下：

    .content::after {
      content: '';
      display: table;
      clear: left;
      visibility: hidden;
    }

要知道::after的作用：用来创建一个伪元素，作为已选中元素的最后一个子元素。其本质上就是在新增一个元素，原理同额外标签法的第二种写法，也会撑开content盒子。
另外，此处display的属性并不唯一，block等能此元素将显示为块级元素的属性都可以。

2. 创建新的BFC（块格式化上下文）

常见的是给父元素添加overflow: hidden，以此创建新的BFC。那么创建新的BFC有什么用呢？
BFC能够包含内部浮动，换言之，内部的浮动元素能够撑开盒子了，当然就不存在高度塌陷的问题了。

    .content {
      overflow: hidden;	/* 添加的代码 */
      background-color: rgb(255, 218, 252);
    }

当然创建新的BFC不仅只有overflow:hidden这一种，其他方法参考 MDN-块格式化上下文。

BFC的其他功能

到此清除浮动的内容就说完了，看到BFC的介绍有想到了其他内容。
创建新的 BFC，它将：

1. 包含内部浮动 - 解决了float造成的高度塌陷
2. 排除外部浮动 - 待发现
3. 阻止外边距重叠 - 解决了外边距塌陷的问题