css之clear属性，both left right详解，解决父元素高度塌陷

现象

我们常说用clear: both来清除浮动，那么原理是什么呢？

首先我们来看一个例子：

<style>
  .fa {
    width: 200px;
    border: 1px solid red;
  }
  .son {
    width: 100px;
    height: 100px;
    float: left;
    background-color: burlywood;
  }
</style>

<div class="fa">
  <div class="son">左浮动1</div>
</div>

结果：父元素高度坍塌

解决办法：给浮动的元素后面加个块元素，样式为clear: both;

.test {
  clear: both;
}

<div class="fa">
  <div class="son">左浮动1</div>
  <div class="test"></div>
</div>

结果：父元素高度被撑开

那么，为什么会出现这种现象呢？

1、 clear 属性

MDN解释：

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

css文档里面规定：

left
        要求框的顶边框边低于在源文档中之前生成的任何左浮动框的底外边距边。
right
        要求框的顶边框边低于在源文档中之前生成的任何右浮动框的的底外边距边。
both
        要求框的顶边框边低于在源文档中之前生成的任何浮动框的底外边距边。
none
        对框相对于浮动框的位置没有额外的约束。

总结一下就是：

• 具有clear 属性的元素放在浮动元素之后才能起到闭合浮动的作用（clear 只能“消除”在它前面的元素的浮动），把浮动元素放在clear元素后面是没有用的。
• 网上说 clear：both 会消除该元素两侧（dom顺序层面）的浮动 的说法是错误的！！
• 该属性是针对元素本身的

这个类名为 test 的 div 顶边框边低于在源文档中之前生成的任何浮动框的底外边距边，所以如上图显示的test 块元素的位置，在浮动元素之下，所以会把父元素给撑起来。

2、both left right 区别举例

示例

一个父元素里两个左浮动元素，一个右浮动元素，父元素高度塌陷，结果如下：

<style>
 .fa {
    margin: 100px auto;
    width: 400px;
    border: 1px solid red;
  }
  .left1 {
    width: 100px;
    height: 100px;
    float: left;
    background-color: burlywood;
  }
  .left2 {
    width: 100px;
    height: 200px;
    float: left;
    background-color: fuchsia;
  }
  .right {
    width: 100px;
    height: 150px;
    float: right;
    background-color: aquamarine;
  }
</style>

<div class="fa">
  <div class="left1">左浮动1</div>
  <div class="left2">左浮动2</div>
  <div class="right">右浮动</div>
  <div class="test"></div>
</div>

父元素高度塌陷：

2.1 left

.test {
  clear: left;
}

上面解释到：值为left时， 要求具有clear属性的元素框的顶边框边低于在源文档中之前生成的任何左浮动框的底外边距边。
所以 .test 的元素div的位置是在所有左浮动元素的下方，即：

我们可以看出，父元素的高度为左浮动2元素的高度，为200px

2.2 right

.test {
  clear: right;
}

上面解释到：值为right时， 要求具有clear属性的元素框的顶边框边低于在源文档中之前生成的任何右浮动框的底外边距边。
所以 .test 的元素div的位置是在所有右浮动元素的下方，即：

我们可以看出，父元素的高度为右浮动元素的高度，为150px

2.3 both

.test {
  clear: both;
}

上面解释到：值为both时， 要求具有clear属性的元素框的顶边框边低于在源文档中之前生成的任何浮动框的底外边距边。
所以 .test 的元素div的位置是在所有浮动元素的下方，即：

我们可以看出，父元素的高度为所有浮动元素的最大的高度，为200px

3、借助父元素的::after清除浮动

.fa::after {
  content: "";
  display: block;
  clear: both;
}