search

Aaaaaaaty / blog

趁还能折腾的时候多读书——前端何时是个头
1.78k stars 272 forks source link

对于浮动的定义我遗漏了什么 #25

Open Aaaaaaaty opened 7 years ago

Aaaaaaaty commented 7 years ago

写在最前

本次记录一段突然令我困惑的css代码。主要是由于css一直掌握的不好同时突然出现了一种很常见的浮动情况但是并不能用已有的认知来解释，故从规范中寻找答案。

欢迎关注我的博客，不定期更新中——

MDN对于浮动的解释

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).

主要关注三点：

看完这段话我其实还是有困惑的。主要的困惑是“部分流动性”怎么讲？不是已经脱离文档流了么？按照之前我对float的理解，我认为一般浮动是两种情况：

  <div class="red left"></div>
  <div class="green"></div>

<div class="red left"></div>
  <div class="green">As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</div>
</body>

这就是我之前对于关于浮动定义出的特性所理解的关于“脱离文档流”以及“文字环绕”的理解。至于“保持部分流动性”这种东西我以为离我很远我也就没有在意。直到。。

令我手足无措的非常简单的一段代码。。

<div class="left"></div>
<div class="center">
    some content fits or there are no more floats present.
</div>

image

这是一段很平常的代码。。浮动元素脱离文档流，下面的元素不认识它了就顶替了它的位置，同时文字可以识别，故有了环绕效果。 当我把这两个元素倒置了一下之后。。

<div class="center">
    some content fits or there are no more floats present.
</div>
<div class="left"></div>

image 我一直的理解都是，浮动元素脱离了文档流！但是为什么现在没有出现在顶点呢？而这也正是我之前对于MDN解读中遗漏的一小部分导致的。（其实我认为是MDN没说清楚。。那么写愚钝的我并没不能反应过来是什么意思。）

对于浮动的定义我遗漏了什么

though still remaining a part of the flow (in contrast to absolute positioning).

其实文档中已经说的很明确了。我遗漏了浮动的部分流动性。而这部分流动性到底是什么？来看下我找了“很久”的规范怎么说：

00dcc902-0103-41f1-9881-006f4bf6da13

规范中对于浮动的定义比MDN多了些什么？顺序！来看下规范里提到浮动元素如何定位：

  1. 先根据正常流进行布局
  2. 脱离文档流，并向左或向右顶到头

我遗漏的关键点就在于：部分流动性指浮动元素会先按照正常流进行布局。

从而可以知道之前下图这样的结果是为什么了。 image 因为浮动元素是先根据normal flow进行布局，再脱离文档流。脱离之后只能向左或者向右了。确实那个时候上面的元素不认识浮动元素了，但是浮动元素已经定位过了，只能左右动。

小结

至此我们就可以知道，浮动元素确实脱离了文档流，但其和绝对定位不同的地方在于的部分流动性指的是，它会先根绝正常文档流进行布局。之后再脱离文档流，自由翱翔。不像绝对定位，你文档流爱谁谁，我只关心上级的relative/absolute在哪里：）

参考资料

think2011 commented 7 years ago

"...浮动元素会先按照正常流进行布局" 赞！

Aaaaaaaty commented 7 years ago

@think2011 我一直不知道这个“坑” 所以很多对有些布局无法理解2333

LeoWang1991 commented 7 years ago 

<div class="center">
    some content fits or there are no more floats present.
</div>
<div class="left"></div>

我一直的理解都是，浮动元素脱离了文档流！但是为什么现在没有出现在顶点呢？

为什么脱离文档流就一定要在顶点上，如果没有设置position left/top，该demo中就算把.left div设置position:absolute(不设置left/top位置)也是一样在.center元素下面。 我觉得脱离文档流的元素对其之前正常元素的位置并没有影响，对之后正常的元素定位有影响。

Aaaaaaaty commented 7 years ago

@LeoWang1991 嗯是的 我之前一直没有意识到浮动元素在脱离文档流之后只会向左或者向右。所以就没有理解为啥不能向上，顶到头。至于position定位，你说的都对哈哈。重点就是这些布局先都是正常流布局，然后再脱离文档流，一个是浮动的话只能左右移动，absolute则可以通过设置topleft来随意走。只会影响后面的。谢谢指出问题！！！