ok~_~ok 2019-01-27 10:54 采纳率: 66.7%
浏览 2134
已采纳

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

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

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

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


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



float.png

  • 写回答

4条回答 默认 最新

  • 传说中的神话灬 2019-01-27 11:06
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥20 Js代码报错问题不知道怎么解决
  • ¥15 gojs 点击按钮node的position位置进行改变，再次点击回到原来的位置
  • ¥15 计算决策面并仿真附上结果
  • ¥20 halcon 图像拼接
  • ¥15 webstorm上开发的vue3+vite5+typeScript打包时报错
  • ¥15 vue使用gojs，需求在link中的虚线上添加方向箭头
  • ¥15 CSS通配符清除内外边距为什么可以覆盖默认样式？
  • ¥15 SPSS分类模型实训题步骤
  • ¥100 求ASMedia ASM1184e & ASM1187e 芯片datasheet/规格书
  • ¥15 求解决扩散模型代码问题