css浮动问题大家看看吧

Question

 
浮动元素span 

 

 
浮动元素span 

 !

为什么会呈现这种效果

Answer 1

在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列

在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排。

CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。

（1）浮动后的盒子将以块级元素显示，但宽度不会自动伸展。
（2）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置（IE有时例外）。
（3）未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。

提示：所谓“脱离标准流”是指元素不再占据在标准流下浏览器分配给它的空间，其他元素就好像这个元素不存在一样。例如图4-63中，当Box-1浮动后，Box-2就顶到了Box-1的位置，相当于Box-2视Box-1不存在一样。但是，浮动元素并没有完全脱离标准流，这表现在浮动盒子会影响未浮动盒子中内容的排列，例如Box-2中的内容会跟在Box-1盒子之后进行排列，而不会忽略Box-1盒子的存在

① 多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。
② 若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动（图4-68）。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住

clear是清除浮动属性，它的取值有left、right、both和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示

总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动