清除浮动

[Twlig]

什么是浮动？

浮动最开始是为了实现文字环绕效果。浮动元素之后的元素将围绕它。比如一个图片先向左浮动，紧接着的p文本就会环绕这图片，图片不会遮罩文字。但其实浮动图片相当于在文本下一层，并且文本会自动避开浮动元素显示。

• 元素只能在水平方向浮动，意味着元素只能左右移动而不能上下移动。

• 浮动元素之前的元素将影响浮动元素，但自身不会受到影响。

• 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到文档流内的元素或另一个浮动框的边框为止。（如果前一个元素是脱离文档流的，如fixed，则不会影响浮动元素）

• 浮动元素后面的元素将无视浮动，因此会被浮动元素遮罩。

清除浮动

浮动，最先是为了文字环绕效果。后面才用于布局。当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动方法

下面这个布局，container元素的高度会塌陷

<div class="container">
    <div class="float"></div>
</div>
<style>
    .container {
        width: 200px;
        background-color: red;
    }
    .float {
        width: 100px;
        height: 300px;
        background-color: green;
        float: left;
    }
</style>

• 给父元素设置BFC

    .container {
        width: 200px;
        background-color: red;
        overflow: hidden;
    }

• 给父元素使用::after伪元素

  .container::after{
    content: "";
    display: block; /*不是块级元素不触发清除效果，因为::after默认为inline元素。inline不会占据一整行，所以就不会被浮动影响。也就无法清除浮动*/
    clear: both;
  }

• 浮动元素后面添加一个多余元素并设置clear:both

  需要注意添加的这个元素必须放在最后，并且一定要是块级元素或者display: block，因为行内元素和inline-block都是一行内可以有多个，因此可以和浮动元素并排，就达不到清除浮动的效果。之所以可以让浮动元素高度填充父元素，是因为设置clear:both后该clearF元素布局回归了前面元素无浮动时的真实位置。这样才能撑开父元素。

  <div class="container">
    <div class="float"></div>
    <div class="clearF" style="clear:both"></div>
  </div>