开发者社区> 问答> 正文

关于 css浮动的问题。

我们为什么要设置浮动,直接在文档流上设置不就行了吗?求大神,!!本人小白还有什么情况才添加浮动。

展开
收起
小旋风柴进 2016-06-07 13:45:25 2167 0
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则表示两边都不允许有浮动对象,因此该盒子将会在浏览器中另起一行显示

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

    2019-07-17 19:29:53
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载