最近又重新温习了一下浮动的相关知识。在此总结一下，也希望大家能在其中有所收获。
首先我们应该明确的是：什么是浮动？
简单的来说，浮动就是脱离的正常的文档流，向左或者向右偏移，从而后面的元素根据空间大小，自动填充。
浮动的优点：方便布局
浮动的缺点：浮动之后的元素相当于漂浮在了文档流的上方，会导致父元素高度塌陷。
再次顺带介绍一下BFC（Block Formatting Context）的概念，BFC:块级格式化上下文，用于对块级元素的排版，默认情况下只有body一个块级元素，但是如果一个块级元素设置了float：left |right ， overflow：hidden | auto ， position：absolute | fixed ，display：inline-block | table-cell | table-caption那么这个块级元素就会成为一个独立的块级元素。通俗来说就是，块级元素变成一个独立的容器，内外的元素不会再相互影响。
BFC有以下特性：
1.不会被其他的浮动元素覆盖
2.可以包含浮动元素，且自身高度不会塌陷
那么什么是清除浮动？或者说清除浮动是为了解决什么问题？
1.解决元素相互覆盖的问题
2.解决文字环绕问题
3.解决块级元素的高度塌陷的问题
那么如何清除浮动？
1.对清除浮动的元素css设置clear属性
<div style="width:100px; height:100px; background-color:#ccc; float:right; ">3</div>
<div style="width:100px; height:100px; background-color:#ccc; float:right; clear:right">4</div>
2.添加空标签（包括两种情况）
第一种情况：直接在待清楚浮动的元素前面添加空元素
<div style="clear:both"><div>
或者
<br clear="all">
第二种情况：在浮动元素的父元素的css样式中添加：after伪类；代码如下，
css 样式：
.clearfix:after {
content:"";
height:0;
display:block;
visibiltity:hidden;
clear:both;
｝
html元素：
<div class="clearfix">
<div id="child" style="width:100px; height:100px; float:right">1</div>
</div>
以上的实例会在id为child的div后面添加一个不显示的高度为0的块元素,从而实现清楚浮动的目的
3.对父元素添加css属性
在父元素的css样式中添加：
overflow：hidden | auto , float:left | right ,position：absolute | fixed ，display：inline-block | table-cell | table-caption 但是这些方法或多或少会有局限性，不建议使用。
以上，欢迎指正！
作者：IMCapricorn
链接：https://www.jianshu.com/p/5dbeb9ff9306
随时随地看视频
