1.Float的介绍
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄(塌陷的产生)。
注：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.《CSS Mastery》一书中讲的特别有趣和好理解，我简单的用几个demo介绍一下。
a.不浮动的时候
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; ">
</div>
<div style="height: 100px; width: 100px; ">
</div>
<div style="height: 100px; width: 100px; ">
</div>
</div>
b.当red部分右浮动：<div style="border: solid 5px #09F; width:300px;">
父元素内容
<div style="height: 100px; width: 100px; float:right;">
</div>
<div style="height: 100px; width: 100px; ">
</div>
<div style="height: 100px; width: 100px; ">
</div>
c.当red部分左浮动：<div style="border: solid 5px #09F; width:300px;">
父元素内容
<div style="height: 100px; width: 100px; float:left;"></div>
<div style="height: 100px; width: 100px; "></div>
<div style="height: 100px; width: 100px; "></div>
</div>
此时的green和yellow部分和”父元素内容”是在普通文档流中，red部分覆盖了文档流中的green部分。
d.所有的向左浮动,父元素的高度为0<div style="border: solid 5px #09F; width:300px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
当所有的元素都向左或者是向右浮动（此例子效果相同如上图），父元素未浮动，此时父元素就会出现塌陷，即父元素的高度为0px。
如果父包含块太窄而无法容纳水平排列的多个浮动元素时,那么其它浮动块儿向下移动,,直至找到有足够的宽度容纳浮动块,如果浮动元素的高度不同,那么在向下移动的时候可能会被卡住。
e.当父元素的宽度不足以容纳所有的浮动元素时，浮动块就会下移，如下图：<div style="border: solid 5px #09F; width:240px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
</div>
f.当高度不等时会出现类似“卡住了”现象，如下图<div style="border: solid 5px #09F; width:240px;">
<div style="height: 110px; width: 100px; float:left;"> </div>
<div style="height: 100px; width: 100px; float:left;"> </div>
<div style="height: 80px; width: 100px; float:left;"> </div>
</div>
2. 清除浮动【float】
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。如上一篇中讲到的所有元素左浮动时，元素塌陷即父元素高度为0px；
清除浮动前：
方法一：使用带clear属性的空元素清除
<style>
.clear {
clear: both;
}
</style>
<body>
<div style="border: solid 5px #09F; width:300px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div class="clear"></div>
</div>
</body>
清除浮动后：
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
方法二：使用CSS的overflow属性
给未浮动的父元素设置 overflow: auto;或 overflow: hidden;属性。另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
<div style="border: solid 5px #09F; width:300px; overflow: auto;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
方法三：给浮动的元素的容器添加浮动
-
<div style="border: solid 5px #09F; width:300px; float:left;"> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> <div style="height: 100px; width: 100px; float:left;"> </div> </div>缺点：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用，当父元素是body时设置无效。
方法四：使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
<style>
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1; /*兼容IE6 IE7*/
}
</style>
<body>
<div class="clearfix" style="border: solid 5px #09F; width:300px; ">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
</div>
</body>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格”020”或点”.”，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
方法五：使用邻接元素处理
给浮动元素后面的元素添加clear属性，此元素与浮动元素是同一级的元素。
清除前： 
<div style="border: solid 5px #09F; width:500px; "> <div style="height: 100px; width: 100px; float:left;"></div> <div style="height: 100px; width: 100px; float:left;"></div> <div style="height: 100px; width: 100px; float:left;"></div> <div style="clear: both; background: #800080;">同级元素</div> </div>
清除后：
原文地址：https://www.cnblogs.com/daydayupyxq/p/8586543.html