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

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

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