浅谈CSS关于清除浮动的三种方法

CSS中，因为布局需要，我们常常希望出现一些浮动布局，比如图文环绕。这些浮动布局虽然看过去很cool，但由于浮动脱离了文档流（Normal Flow），对页面的正常布局造成一些看得见和看不见的影响。本文将简单描述一下浮动（Float）出现的问题，以及如何清除浮动。让图文环绕等浮动布局既能实现，又无副作用。

Float元素的使用方法

float 属性可以使一个元素脱离正常的文档流（Normal Flow），然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。

注意：当使用float属性后，被强制display成了block。但flex不起作用

什么是文档流（Normal Flow）

文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素

简单理解：文档流即我们平时写文章的正常顺序，文字从左到后，然后至上而下。

所有不按照此规则布局，都称之为脱离文档流

浮动效果

可以看到，float 元素脱离了文档流（Normal Flow），它就相当于进入了一个平行空间，占据了空间位置却又不受限定空间限制（父级块级元素）。这一特性使得 float 元素无法撑起父元素的高度，导致父元素塌陷。

由于float的浮动缺陷，导致开发者在布局页面时经常出现或多或少的烦恼，因此我们要清除浮动，目的是让float 元素和其他元素一样，实现图文环绕的同事，仅占据空间位置（不进入平行空间）。

如何清除浮动

为了解决 float 属性引发的问题，CSS 引入了clear:left|right|both属性，其作用分别是在元素的 左侧|右侧|两侧 不允许存在 float 元素，我们可以用他来清除其副作用。

利用 clear 属性我们有两种方法来清除浮动。

为 float 元素后的元素添加 clear 属性

 <section style="border:solid 1px red;height:140px;"> 
 <div style="border:solid 1px black;height:160px;width:100px;float:left">  
 </div>
  
<!-- 我还未添加clear，导致float后的div超出父类section元素的高度  
     <div style="border:solid 1px blue;"></div>  -->
</section>```


添加clear前![](http://upload-images.jianshu.io/upload_images/4732246-c3a81f1ccbb050f7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

<section style="border:solid 1px red;">
<div style="border:solid 1px black;height:160px;width:100px;float:left">
</div>

<div style="border:solid 1px blue;clear:left"></div>

</section>```

同理，我们可以使用伪类元素

<style>

<!-- 可以写一个.clearfix 工具样式，当给需要清除浮动时，就为其加上这个类-->

  .clearfix::after{content:'';display:block;clear:both}
  .parent{border:1px solid red;}
</style>
<section class="clearfix parent">
  <div style="border:solid 1px black;height:160px;width:100px;float:left">  
  </div>  
</section>

修改父元素的 owerflow 属性

<style>
  .parent{border:1px solid red;overflow:auto}
  <!--overflow 的属性有 auto|hidden-->
  
</style>
<section class="parent">
  <div style="border:solid 1px black;height:160px;width:100px;float:left">  
  </div>  
</section>

总结：以上三种是常见的清除浮动的方式，笔者建议使用伪类元素，对代码不造成额外的负担