七寒谷
2015-12-19 14:52
采纳率: 100%
浏览 1.5k

css浮动问题大家看看吧

 
浮动元素span 
 
 
浮动元素span 
 !

为什么会呈现这种效果

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • Appcss 2015-12-19 14:57
    已采纳

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

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

    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则表示两边都不允许有浮动对象,因此该盒子将会在浏览器中另起一行显示

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

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题