li_13579_li
2019-01-27 10:54
采纳率: 95.1%
浏览 1.8k
已采纳

CSS float 的疑问 : 当给两个div都设置浮动之后,为什么它们会在同一行显示?

MDN:当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

疑问:MDN中说的是向左或向右移动,一直平移直到碰到了所处的容器的边框。
可是.box2元素为什么是向上移动了吗?

MDN:浮动元素是如何定位的


CSS权威指南(第三版):"浮动元素会生成一个块级框 , 而不论这个元素本身是什么"
而且float 不为 none 的时候, 元素的 display 计算值为 block ,那这两个div更不应该位于同一行啊?



float.png

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

4条回答 默认 最新

  • 传说中的神话灬 2019-01-27 11:06
    已采纳

    首先，两个div（块级非置换元素）不会显示在同一行内，这种规则是属于常规流的。对于浮动元素，是不在常规流里面的，因此这种规则是不适合的。浮动盒将被移动至左侧或右侧直至其外侧紧贴包含盒的边缘或另外一个浮动的外边缘。如果存在行盒，浮动盒的顶部外边缘将与行盒的顶部对齐，能并排即是浮动规则使然.

    点赞 评论
  • 天际的海浪 2019-01-27 15:13

    div（也就是block块元素）独占一行的特性只是在正常的文档流中才有的。
    当元素浮动之后，被移出正常的文档流，也就不会独占一行了。
    在原本的文档流中box2之所以位于第二行是因为box1独占了第一行。
    当box1设置浮动移出正常的文档流后，box2不就在文档流中上移到第一行了么？，之后box2也浮动，也是在第一行的位置浮动。

    点赞 评论
  • 虚槐若谷 2019-01-28 10:53

    float会使div脱离正常文档流，不单独占一行，可以理解成为了行内元素。不过浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间。且float与position:absolute不同，并不是完全的脱离。使用float要注意存在父元素高度塌陷问题，用完请记得清除浮动(clear等，原理：让添加了clear属性的那个元素的top边缘在某侧或者两侧（看设置的值是left right还是both）浮动元素的底边距之下。)。

    点赞 评论
  • aneyl 2019-02-04 11:22

    楼上说的有点意思的样子啊

    点赞 评论

报告相同问题？

提交

相关推荐 更多相似问题