V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
manyfreebug
V2EX  ›  JavaScript

CSS float 的疑问 : 为什么此时 .box2 元素不是向左移动,而是向上移动了?

  •  
  •   manyfreebug · 2019-01-26 22:49:22 +08:00 · 3546 次点击
    这是一个创建于 1888 天前的主题,其中的信息可能已经有所发展或是发生改变。
    https://developer.mozilla.org/zh-CN/docs/CSS/float#浮动元素是如何定位的
    
    16 条回复    2019-02-28 23:10:07 +08:00
    shiny
        1
    shiny  
       2019-01-26 22:53:03 +08:00
    或者碰到另外一个浮动的元素
    manyfreebug
        2
    manyfreebug  
    OP
       2019-01-26 22:59:06 +08:00
    @shiny .box2 在未浮动前的位置平移不会碰到.box1 啊
    jecshcier
        3
    jecshcier  
       2019-01-26 23:05:58 +08:00 via iPhone
    @manyfreebug div 默认 display 是 block,独占一行,你设了高度,所以两个盒子之前是上下关系。设为 float 之后,两个盒子的 block 属性会被忽略(参看 float 的特性),所以此时两个盒子会在同一行。
    1010543618
        4
    1010543618  
       2019-01-26 23:09:22 +08:00
    浮动元素在一个 BFC 内就是依次排列的,float 规定方向
    manyfreebug
        5
    manyfreebug  
    OP
       2019-01-26 23:10:56 +08:00
    @jecshcier "浮动元素会生成一个块级框,而不论它本身是何种元素。" -- http://www.w3school.com.cn/cssref/pr_class_float.asp
    manyfreebug
        6
    manyfreebug  
    OP
       2019-01-26 23:12:04 +08:00
    @jecshcier 有块级框,所以不是应该浮动之后还是一个块级元素吗?
    rabbbit
        7
    rabbbit  
       2019-01-26 23:13:03 +08:00
    如果当前盒是向左浮动的,并且在这之前源文档中还有元素生成了左浮动盒,那么对于每一个之前的盒,要么当前盒的左外边界在之前的盒的右外边界的右边,要么其顶部要低于之前盒的底部。右浮动盒也有类似的规则
    http://www.ayqy.net/doc/css2-1/visuren.html#float-position
    总之就是在不超出容器的范围内,尽可能的往左上跑
    manyfreebug
        8
    manyfreebug  
    OP
       2019-01-26 23:21:54 +08:00
    @rabbbit "要么其顶部要低于之前盒的底部" ,如果.box2 一直在第二行,不是也符合这句话?
    manyfreebug
        9
    manyfreebug  
    OP
       2019-01-26 23:22:22 +08:00
    @rabbbit "要么当前盒的左外边界在之前的盒的右外边界的右边" 像是针对水平方向的元素说的 ; "要么其顶部要低于之前盒的底部"像是针对竖直方向说的 ,例子中的
    rabbbit
        10
    rabbbit  
       2019-01-26 23:28:56 +08:00   ❤️ 1
    如果浮动元素 a 后面还有个浮动元素 b
    - b 可能在 a 的右边
    - 也可能在 a 的底下
    具体是那种情况,则取决于 a+b 的宽度是否小于容器宽度
    能放下,就在右边.装不下,就下去了
    看规则 7: 左边存在另一个左浮动盒的左浮动盒的右边界不能位于其包含块的右边界的右边
    shiny
        11
    shiny  
       2019-01-26 23:35:07 +08:00   ❤️ 1
    float 首先要脱离当前的文档流,然后再来谈方位。更清晰可以看 w3 规范里的定义 https://www.w3.org/TR/CSS2/visuren.html#floats
    jecshcier
        12
    jecshcier  
       2019-01-27 00:23:26 +08:00 via iPhone
    @manyfreebug 同 11 楼。float 会使元素脱离文档流。在你设置 float 属性之前,两个 div 在文档流内,block 属性起作用,才有了上下位置。
    jecshcier
        13
    jecshcier  
       2019-01-27 00:27:14 +08:00 via iPhone
    @manyfreebug 另外,你链接里所说的块级框和块级元素貌似不是一个意思。。
    jingyulong
        14
    jingyulong  
       2019-01-27 00:53:31 +08:00 via iPhone   ❤️ 1
    把浮动当成新的文档流,一行一行的,所以它会跟在同样浮动的元素后面,直到遇到容器边界。这样应该通俗易懂。
    PyCode
        15
    PyCode  
       2019-01-28 15:40:00 +08:00
    浮动元素是在当前行框向左或向右浮动,该例子里第一个浮动元素并不会影响行框排列。
    xieranmaya
        16
    xieranmaya  
       2019-02-28 23:10:07 +08:00
    上方有空间的时候,会优先考虑放在上方,上方没有空间时才会下移后向两边移动。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4751 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 05:37 · PVG 13:37 · LAX 22:37 · JFK 01:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.