容器类的元素不管它的大小如何都是独占一行的，在正常情况下，它们的排列是由上至下的。
所谓的浮动从字面上去简单的理解，就是一个元素从页面上所有的元素当中脱离并漂浮起来，这个时候它所占据的空间就产生空缺，那么写在它后面的那些元素就会自动的向上走，填补这个空缺。如下图所示：
绿色块设为浮动
红色和蓝色块自动往上走，填补空缺位置
正面视觉效果
另外，浮动元素会脱离网页文档，与其他元素发生重叠。但是，不会与文字内容发生任何重叠，如下图效果。
image.png
代码：
float:left /*左浮动*/
float:right /*右浮动*/
在日常开发中，如果继续编写网页后面的内容时，会遇到一个问题，由于前面的元素的浮动的，那么后来的元素就会被前面浮动的元素所遮挡，如下图：
底下的灰黑色div块往上移动，被红绿蓝块所遮挡
我们希望前面的这些元素可以浮动达到横向排列效果，但是又不想这些元素的浮动给我们带来这些麻烦，可以用以下解决办法：
我们可以在红绿蓝三个浮动元素的外层又包裹一层父元素，那么父元素和后面的元素之间不存在浮动关系，自然也不会出现重叠的问题。如下图所示：
红绿蓝三个浮动元素外层包裹一层父元素的效果
值得注意的是，对于普通
的元素来讲，子元素的大小是可以被父元素撑开的，但在这里因为红绿蓝块是浮动的，它们不占据空间，因此也就没办法撑开我们的父元素了，所以最直观的解决办法是，要给父元素设定一个高，这个高的值要和红绿蓝块的高的高度一致，才能达到上图所示的效果。
当然，如果你不想设置这个高度，那么可以用以下两个常见的办法，来清除元素浮动的影响。
第一种：为了让父元素的高度保持正常，我们给父元素增加一个样式，叫做【overflow:auto】。
这个样式的含义表示对于超出边界的元素，父元素可以做自动的调整，这样父元素的高度就变得正常了。
第二种：使用【clear:left/right/both】，clear这个样式叫做清除浮动。
简单的说，当我们不希望当前元素受前面浮动元素影响的时候，可以给当前元素增加clear这个样式，再换一句话就是，谁不希望受到影响，谁就增加clear样式。
clear:left;/表示该元素不受左浮动的影响/
clear:right;/表示该元素不受右浮动的影响/
clear:both;/表示该元素不受左右浮动的影响/
浮动元素的排列方式：
注意，浮动元素在排列的时候，只参考前一个元素位置即可，如下图例子：
首先我设置了三个浮动元素，然后呢我增加了第四个浮动元素，这时候由于父元素已经放不下第四个了，所以4号元素就会像文字或者图片那样换行进行显示，但由于浮动元素在排列时只参考前一个元素位置，那么我们可以不用考虑1号和2号的元素，我们只看离它最近的3号元素，排列结果如下图所示：
image.png
如果元素调换一下，那么就是以下的效果：
image.png
关于右浮动的顺序问题：
现在我有3个左浮动元素，如果我把它做成右浮动，就会变成以下这个样子：
image.png
浮动元素的重叠问题
1、浮动元素不会覆盖文字内容
2、浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以把图片看做是一个特殊的文字）
3、浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、按钮、下拉选择框等）
