改变元素的排列方式的时候会用到浮动
浮动的元素会脱离文档流，正常的文档流视其而不见
浮动元素的停止：找到父元素的边框停止
浮动元素的卡顿：元素高度大于其他元素；
2、浮动引发的BUG:
1、父元素不设置高度，所有子元素都浮动
2、浮动的子元素撑不开父元素的高度
3、解决办法：
1、给父元素添加overflow: hidden
2、给父元素添加最后一个子元素 clear：both 清除浮动
3、能设置高度的元素都设置高度
4、伪类元素清除
是这样的：
①当包含浮动元素的容器宽度不够容纳另一个浮动元素时，该元素就会下沉一定高度，直到有足够的空间可以继续沿着设置的方向移动；
②元素往设定的方向浮动时，什么时候会停止呢？
1是当浮动元素的外边缘 触碰到它的父级的内边缘时。
2是当浮动元素的外边缘 触碰到另一个浮动元素的外边缘时。
【此时不会出现①的下沉情况 是因为在该位置有足够的空间容纳该浮动元素，所以就卡在那里。】
在div+css中浮动不起作用,可能是原因是你设置flaot的这个元素不是块级元素，所以float对它是不起任何作用的，如span和a这些标签，我这里写个代码：<html>
<head>
<style>
#sub{ //通过id实现
width:300px //只是假定的值，需要根据实际的要求写。
height:30px
float:left
}
span{ //通过id实现
width:300px
height:30px
float:left 不是块级元素，不会有float属性的
}
</head>
<body>
<div>
<div id=sub>测试文字，</div>
<span>我不会浮动的</span>
</div>
</body>
</html>
我们想要浮动的话，只要将span那在加一个display:block；就能够实现浮动了。
