扶梯正确使用

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

乘坐自动扶梯解释CSS浮动 (CSS Floats Explained By Riding An Escalator)

如果您曾经跳过自动扶梯，那么您可以快速了解浮动。 (If you have ever jumped on an escalator, then you can quickly understand floats.)

Your <div> is almost perfect. You decide to introduce some floats to fix the relationship between a few elements.

您的<div>几乎是完美的。 您决定引入一些浮点数来修复一些元素之间的关系。

The next thing you know, your newly floated elements jump out of your carefully chosen order, and stick to the side of your div like a magnet. The phrase “unintended behavior” comes to mind.

接下来您会知道，新浮动的元素会跳出您精心选择的顺序，并像磁铁一样粘在div的一侧。 我想到了“意想不到的行为”。

I’ve personally spent hours trying to fully understand floats. I’d read an article and say, “Oh, this makes sense!” Then I’d return to my code, try it out and… fail. Back to the drawing board.

我个人花费了数小时试图完全理解花车。 我读了一篇文章说：“哦，这很合理！” 然后，我将返回代码，尝试一下，然后…失败。 回到绘图板。

I’m going to do my best to spare you this fate.

我将竭尽全力为您节省命运。

Floats create alternate flows. This is the hardest part to understand. And once you introduce them, you then need to write your code so that it accounts for up to three flows: normal, left and right. This is a whole new set of rules, as opposed to manipulating the width of elements or their positioning.

浮动产生交替的流动 。 这是最难理解的部分。 一旦介绍了它们，就需要编写代码，以便它最多说明三个流程：正常，向左和向右。 这是一组全新的规则，与操纵元素的宽度或其位置相反。

Actually, floats are pretty similar to the dynamics of riding an escalator, and I am going to show how they can be used alongside the clear property to create crystal-clear relationships within divs. This way, the next time you try to use floats in your code, you won’t encounter any surprises.

实际上，花车与乘坐自动扶梯的动力非常相似，我将展示如何将它们与clear属性一起使用，以在div中创建水晶般清晰的关系。 这样，下次您尝试在代码中使用浮点数时，就不会遇到任何意外。

要尊重通过车道 (Gotta respect the pass lane)

The default flow of elements is kind of like the picture above. Some guy is standing in the middle with his hand on the railing. He’s hogging the entire escalator. Nobody can pass him. Pretty poor escalator etiquette, really.

元素的默认流程类似于上图。 有人站在中间，他的手在栏杆上。 他正在占用整个自动扶梯。 没有人可以通过他。 确实，自动扶梯礼节很差。

He is standing behind a bunch of other people that are doing the same thing, so nobody can pass them either. There is no concept of lanes or basic human decency.

他站在一群正在做同样事情的人后面，所以没人能通过他们。 没有车道或基本的人性化的概念。

This is the scenario when you are not using floats at all.

当您根本不使用浮点数时，就是这种情况。

All right, now we’re talking! People showing some level of awareness. Love to see that.

好吧，现在我们在说话！ 人们表现出一定程度的意识。 很高兴看到这一点。

We have one lane formed on the left, and another lane formed on the right. Other people can easily move around the two people that are standing still and walk up the escalator more quickly, if they want. Nobody is blocking the flow by standing in the middle.

我们在左侧形成一个车道，在右侧形成另一个车道。 如果他们愿意，其他人可以轻松地在静止不动的两个人周围移动，并更快地走上自动扶梯。 没有人站在中间来阻挡潮流。

This is the scenario when you are using floats in your div. There is a left flow and a right flow, and the elements that are not floated can easily fill the space that is not taken by the floated elements.

在div中使用浮点数时就是这种情况。 有左向流和右向流，未浮动的元素可以轻松填充未浮动元素占用的空间。

浮点数：左右 (Floats: Left and Right)

Using floats can introduce up to two new flows: left and right.

使用浮点数最多可以引入两个新流程：向左和向右。

And this allows the normal flow of elements, those without a float value, to fill in the spaces around these elements.

这样，正常的元素流(没有浮点值的元素)就可以填充这些元素周围的空间。

Floats allow you to create these new relationships between flows.

浮点数使您可以在流之间创建这些新关系。

If you had one line of people standing in the middle of the elevator, you would have limited options for new structures. But when you have a left and right column, suddenly you can specify that certain people stand on the right, other ones stay left, and another group can fill in the gaps.

如果您在电梯中间站着一排人，那么新结构的选择将非常有限。 但是，当您有左右两列时，突然可以指定某些人站在右边，其他人留在左边，而另一组人可以填补空白。

This allows you to create more readable and understandable code, because the float property also gives an indication of an element’s relationship to surrounding elements.

这使您可以创建更具可读性和可理解性的代码，因为float属性还可以指示元素与周围元素的关系。

清除财产 (The Clear Property)

There is one more wrinkle that we have not discussed yet: the clear property. “Clear” allows elements to specify where they should align in comparison to the floated elements.

我们还没有讨论过另外一种皱纹： 透明特性 。 “清除”允许元素指定与浮动元素相比应对齐的位置。

In the first picture of the “Floats” section, the two escalator riders were courteously standing on each side of the escalator. This allows others to pass them and move freely as they wish.

在“浮标”部分的第一张图片中，两个自动扶梯骑手有礼貌地站在自动扶梯的每一侧。 这使其他人可以通过他们并自由移动。

Let’s say that instead of having one floated left element and one floated right element, we instead had 3 floated left elements and 1 on the right. The three floated left elements would stack up in a line on the left if we also give them the “clear: left” property. But if they horizontally aligned with the floated right element, it could make it very difficult or even impossible for the normal flow of elements to pass:

假设我们没有一个浮动的左元素和一个浮动的右元素，而是有3个浮​​动的左元素和一个右侧的元素。 如果我们还为它们提供了“ clear：left”属性，则三个浮动的left元素将堆积在左侧的一行中。 但是，如果它们与浮动的右元素水平对齐，则可能使元素的正常流通过变得非常困难，甚至不可能：

“Clear: left” tells each person floating left that they should align themselves behind the first element that is floated left. Depending on the size of the bottom two people, it could be challenging for any normal elements to squeeze through and occupy the space on the top right. So even good escalator practices can still lead to blockages.

“清除：左”告诉每个向左浮动的人，他们应该将自己对齐到向左浮动的第一个元素的后面。 根据底部两个人的大小，任何普通元素都可能会挤过并占据右上角的空间。 因此，即使良好的自动扶梯做法也可能导致阻塞。

One of the most frequent uses of the clear property is “clear:both”. This allows you to reset the flow of elements, as opposed to continuing to maintain a right, left and normal flow. It’s kind of like that guy on the escalator who takes up the whole space because he brought his suitcase.

clear属性最常使用的一种是“ clear：both”。 与继续保持向右，向左和正常流动相反，这使您可以重置元素流。 就像自动扶梯上的那个家伙一样，因为他带来了手提箱而占据了整个空间。

With “clear:both”, it doesn’t matter where that one guy is standing in orientation to his suitcase. It doesn’t matter who is standing left or right above him. He’s still blocking the entire escalator. People who get on after him will need to start a new flow of elements, which could include any of the three flows: left, right, or normal.

有了“ clear：both”，无论一个人站在他的手提箱的方位上都没关系。 谁站在他的左上方或右上方都没关系。 他仍然挡住了整个自动扶梯。 追随他的人将需要开始新的元素流程，其中可能包括三个流程中的任何一个：左，右或正常。

He has escaped the three-flow system and reset the rules. Bad for people that want to run up the escalator? Sure. But it’s good if you want to stop anyone from passing.

他逃脱了三流系统并重设了规则。 对想要启动自动扶梯的人不利吗？ 当然。 但是，如果您想阻止任何人通过，那就很好了。

Notice how this is different from the one gentleman at the beginning who stood in the middle of the escalator, behind a line of people who were doing the same. That was a one-flow system. “Clear: both” acknowledges that there may be up to three flows, and blocks the passage of any element that follows.

请注意，这与起初坐在自动扶梯中间的那一位绅士有什么不同，那一群人正在做同样的事情。 那是一个单流系统。 “清除：两者”确认最多可能有三个流，并阻止随后的任何元素通过。

If you enjoyed this post, you may also enjoy my other explanations of challenging CSS and JavaScript topics, such as positioning, Model-View-Controller, and callbacks.

如果您喜欢这篇文章，那么您可能还会喜欢我对具有挑战性CSS和JavaScript主题的其他解释 ，例如定位，Model-View-Controller和回调。

And if you think this might help other people in the same position as you, give it a “heart”!

而且，如果您认为这可以帮助与您处于同一位置的其他人，请给它一个“心脏”！

This post originally appeared on the CodeAnalogies blog.

该帖子最初出现在CodeAnalogies博客上 。

翻译自: https://www.freecodecamp.org/news/css-floats-explained-by-riding-an-escalator-57fa55232333/

扶梯正确使用