====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
后一修订版 | 前一修订版 | ||
前端基础_css_float浮动.md [2021/09/23 11:57] 若愚 创建 |
前端基础_css_float浮动.md [2021/09/23 12:01] (当前版本) 若愚 [浮动] |
||
---|---|---|---|
行 3: | 行 3: | ||
## 浮动的定义 | ## 浮动的定义 | ||
- | > | + | > 一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐 |
如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了 | 如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了 | ||
- | > | + | > 因为浮动(盒)不在普通流内,在浮动盒之前或者之后创建的未定位的(non-positioned)块盒会竖直排列,就像浮动不存在一样。然而,接着(next to)浮动(盒)创建的当前及后续行盒会进行必要的缩短,为了给浮动(盒)的margin box让出空间 |
[w3.org](https:// | [w3.org](https:// | ||
行 12: | 行 12: | ||
## 浮动的例子讲解 | ## 浮动的例子讲解 | ||
### 放不下会换行 | ### 放不下会换行 | ||
- | ![](http:// | + | ![1](:wiki: |
行 18: | 行 18: | ||
### 被卡住 | ### 被卡住 | ||
- | ![](http:// | + | ![2](:wiki: |
[代码](http:// | [代码](http:// | ||
行 25: | 行 25: | ||
### 文本被缩短下移动 | ### 文本被缩短下移动 | ||
- | ![](http:// | + | |
+ | ![3](:wiki: | ||
[代码](http:// | [代码](http:// |