css清除浮动常用的四种方法实现

在页面布局中经常会用到浮动和清除浮动的操作，但之前是知其然而不知其所以然，看过多篇文章后，有了一些深入的了解，特整理下来！

浮动的目的：

最初设计浮动的目的是为了实现文字等内容可围绕图像显示，后来发现浮动方便布局，所以支持浮动任何元素，元素设置浮动后，会脱离原先文档的普通流中，让原先各自占据一行的块元素在一行显示，代码展示如下：

<style>
    .content{
        border: 2px solid #afed11;
        margin: 100px 600px;
    }
    .a{
        width: 100px;
        height: 200px;
        background-color: red;
    }
    .b{
        width: 100px;
        height: 100px;
        background-color:blue;
    }
</style>
<div class="content">
    <div class="a"></div>
    <div class="b"></div>
</div>

不设置浮动显示如下

如果只设置a块floagt:left:结果如下：

a块脱离了原先的文档普通流，不再占据原先的位置，所以b移移动到原先a的位置，因为a是浮动的，所以会遮挡住b，因为父元素没有设置高度，所以父元素的高度由子元素决定，现在为b的高度，a浮动后，超出了父元素的高度。

现在把b块也设置floagt:left，就实现了2个块状元素在一行显示：

现在看到虽然实现了2个块状元素在一行显示，但是父元素的高度现在为0，会影响到兄弟元素的排版，所以我们现在要解决这个问题，就用到了清除浮动的操作

清除浮动的方法

清除浮动后正常的显示如下图：

1、在父元素高度固定的情况下，可以直接设置父元素的高度height: 200px即可正常显示

2、增加块元素，用clear:both清除

<style>
    .clear{
        clear: both;
    }
</style>
<div class="content">
    <div class="a"></div>
    <div class="b"></div>
    <div class="clear"></div>
</div>

clear：both是清除此元素左右2边的浮动，所以此元素会独占一行，在a、b的下一行，但clear仍然在文档流中，必须包含在父元素内，所以父元素为了包含clear，只能增加高度，最终的效果就达到了高度被撑起来。
用这种方法清除浮动，会为文档中增加不必要的结构，不推荐。

3、 给父元素设置overflow清除浮动

<style>
    .content{
        border: 2px solid #afed11;
        margin: 100px 600px;
        overflow: auto;
    }
</style>

overflow值可以是除visible之外的任何值，都能达到撑起高度的效果，但是scroll是导致滚动条始终存在，hidden会隐藏超出边框的部分，所以在选择的时候要格外注意
为什么overflow会实现这种效果呢？是因为它是一个块级格式化上下文 (Block Fromatting Context)，W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BCF可以包含浮动元素，所以能实现撑起高度的效果。

4、使用after伪类

<style> 
    .clear{zoom:1} 
    .clear:after{
        content:'';
        height: 0;
        display: block;
        clear:both;
    }
</style>
<div class="content clear">
   <div class="a"></div>
   <div class="b"></div>
</div>

跟第2个方法原理类似，只是区别在于:clear在html中插入一个div.clear标签，而content 利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
以上是常用的几种方法，可以根据场景的不同选择适合的。