站点工具

用户工具


====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

后一修订版
前一修订版
前端基础_css_float浮动.md [2021/09/23 11:57]
若愚 创建
前端基础_css_float浮动.md [2021/09/23 12:01] (当前版本)
若愚 [浮动]
行 3: 行 3:
  
 ## 浮动的定义 ## 浮动的定义
->一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐+> 一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐
 如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了 如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了
  
->因为浮动(盒)不在普通流内,在浮动盒之前或者之后创建的未定位的(non-positioned)块盒会竖直排列,就像浮动不存在一样。然而,接着(next to)浮动(盒)创建的当前及后续行盒会进行必要的缩短,为了给浮动(盒)的margin box让出空间+> 因为浮动(盒)不在普通流内,在浮动盒之前或者之后创建的未定位的(non-positioned)块盒会竖直排列,就像浮动不存在一样。然而,接着(next to)浮动(盒)创建的当前及后续行盒会进行必要的缩短,为了给浮动(盒)的margin box让出空间
  
 [w3.org](https://www.w3.org/TR/CSS2/visuren.html#floats) [mdn](https://developer.mozilla.org/zh-CN/docs/CSS/float) [w3.org](https://www.w3.org/TR/CSS2/visuren.html#floats) [mdn](https://developer.mozilla.org/zh-CN/docs/CSS/float)
行 12: 行 12:
 ## 浮动的例子讲解 ## 浮动的例子讲解
 ### 放不下会换行 ### 放不下会换行
-![](http://cdn.jscode.me/30a6a47f-bf8d-4387-a628-374551b148d2+![1](:wiki:浮动1.png
  
  
行 18: 行 18:
  
 ### 被卡住 ### 被卡住
-![](http://cdn.jscode.me/47c65f00-2a0a-4957-98d7-9a6e96dbf588+![2](:wiki:浮动2.png
  
 [代码](http://js.jirengu.com/vipe/6/edit) [代码](http://js.jirengu.com/vipe/6/edit)
行 25: 行 25:
 ### 文本被缩短下移动 ### 文本被缩短下移动
  
-![](http://cdn.jscode.me/aab5be37-54fc-4f6c-adc2-34e318133b54+ 
 +![3](:wiki:浮动3.png
  
 [代码](http://js.jirengu.com/vipe/5/edit) [代码](http://js.jirengu.com/vipe/5/edit)
若愚 · 2021/09/23 11:57 · 前端基础_css_float浮动.md.1632369473.txt.gz