推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
CSS float 的疑问 : 为什么此时 .box2 元素不是向左移动,而是向上移动了?
manyfreebug · 2019-01-26 22:49:22 +08:00 · 3672 次点击这是一个创建于 2145 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://developer.mozilla.org/zh-CN/docs/CSS/float#浮动元素是如何定位的
 |
1
shiny 2019-01-26 22:53:03 +08:00
或者碰到另外一个浮动的元素
|
 |
2
manyfreebug OP @shiny .box2 在未浮动前的位置平移不会碰到.box1 啊
|
 |
3
jecshcier 2019-01-26 23:05:58 +08:00 via iPhone
@manyfreebug div 默认 display 是 block，独占一行，你设了高度，所以两个盒子之前是上下关系。设为 float 之后，两个盒子的 block 属性会被忽略（参看 float 的特性），所以此时两个盒子会在同一行。
|
 |
4
1010543618 2019-01-26 23:09:22 +08:00
浮动元素在一个 BFC 内就是依次排列的，float 规定方向
|
|
5
manyfreebug OP @jecshcier "浮动元素会生成一个块级框，而不论它本身是何种元素。" -- http://www.w3school.com.cn/cssref/pr_class_float.asp
|
|
6
manyfreebug OP @jecshcier 有块级框，所以不是应该浮动之后还是一个块级元素吗？
|
 |
7
rabbbit 2019-01-26 23:13:03 +08:00
如果当前盒是向左浮动的，并且在这之前源文档中还有元素生成了左浮动盒，那么对于每一个之前的盒，要么当前盒的左外边界在之前的盒的右外边界的右边，要么其顶部要低于之前盒的底部。右浮动盒也有类似的规则
http://www.ayqy.net/doc/css2-1/visuren.html#float-position 总之就是在不超出容器的范围内，尽可能的往左上跑 |
|
8
manyfreebug OP @rabbbit "要么其顶部要低于之前盒的底部" ,如果.box2 一直在第二行,不是也符合这句话?
|
|
9
manyfreebug OP @rabbbit "要么当前盒的左外边界在之前的盒的右外边界的右边" 像是针对水平方向的元素说的 ； "要么其顶部要低于之前盒的底部"像是针对竖直方向说的 ，例子中的
|
|
10
rabbbit 2019-01-26 23:28:56 +08:00  1
如果浮动元素 a 后面还有个浮动元素 b
- b 可能在 a 的右边 - 也可能在 a 的底下 具体是那种情况,则取决于 a+b 的宽度是否小于容器宽度 能放下,就在右边.装不下,就下去了 看规则 7: 左边存在另一个左浮动盒的左浮动盒的右边界不能位于其包含块的右边界的右边 |
|
11
shiny 2019-01-26 23:35:07 +08:00 1
float 首先要脱离当前的文档流，然后再来谈方位。更清晰可以看 w3 规范里的定义 https://www.w3.org/TR/CSS2/visuren.html#floats
|
|
12
jecshcier 2019-01-27 00:23:26 +08:00 via iPhone
@manyfreebug 同 11 楼。float 会使元素脱离文档流。在你设置 float 属性之前，两个 div 在文档流内，block 属性起作用，才有了上下位置。
|
|
13
jecshcier 2019-01-27 00:27:14 +08:00 via iPhone
@manyfreebug 另外，你链接里所说的块级框和块级元素貌似不是一个意思。。
|
 |
14
jingyulong 2019-01-27 00:53:31 +08:00 via iPhone 1
把浮动当成新的文档流，一行一行的，所以它会跟在同样浮动的元素后面，直到遇到容器边界。这样应该通俗易懂。
|
 |
15
PyCode 2019-01-28 15:40:00 +08:00
浮动元素是在当前行框向左或向右浮动，该例子里第一个浮动元素并不会影响行框排列。
|
 |
16
xieranmaya 2019-02-28 23:10:07 +08:00
上方有空间的时候，会优先考虑放在上方，上方没有空间时才会下移后向两边移动。
|
Select Language