<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；就能够实现浮动了。
在CSS中使用float指定浮动属性值，该属性的值指出了对象是否及如何浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中，所以文档的标准流中的块框表现得就像浮动框不存在一样。float的基本语法：float：none | left | right1、float取值none： 设置对象不浮动，默认值left： 设置对象浮在左边right： 设置对象浮在右边2、float的特性a)、浮动元素会从标准流中脱离b)、浮动元素会触发BFC（块级元素格式化）、不影响外边距折叠c)、 float元素会变成块标签如果float不是none，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值。float在绝对定位和display为none时不生效: 当display为none时元素会隐藏，所以float意义不大；当position为absolute绝对定位时元素也将从标准流中脱离，元素使用偏移量移动，float特性无效。浮动元素间会堆叠: 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动元素不能溢出包含块: 浮动元素在包含块内，当包含块的宽度不足以容下浮动的子元素时，将自动折行；垂直方向当包含块认为浮动的子元素没有高度时，子元素会溢出，BFC能解决该问题。水平方向不会溢出，垂直方向有可能会溢出清除浮动该属性的值指出了不允许有浮动对象的边。clear：none | left | right | both适用于：块级元素取值：none： 允许两边都可以有浮动对象 both： 不允许有浮动对象 left： 不允许左边有浮动对象 right： 不允许右边有浮动对象1、使用场景：
改变元素的排列方式的时候会用到浮动
浮动的元素会脱离文档流，正常的文档流视其而不见
浮动元素的停止：找到父元素的边框停止
浮动元素的卡顿：元素高度大于其他元素；
2、浮动引发的BUG:
1、父元素不设置高度，所有子元素都浮动
2、浮动的子元素撑不开父元素的高度
3、解决办法：
1、给父元素添加overflow: hidden
2、给父元素添加最后一个子元素 clear：both 清除浮动
3、能设置高度的元素都设置高度
4、伪类元素清除
