AtoZ CSS截屏视频：浮动清晰

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

The float property is most commonly used for page layout.

float属性最常用于页面布局。

However, the original purpose of float was to allow text to wrap around an object, something commonly seen in print design.

但是， float的最初目的是允许文本环绕对象，这在印刷设计中很常见。

As float is often not used as originally intended, working with it can be a bit fragile and a bit tricky until you get used to its quirks.

由于float通常没有按最初的意图使用，因此使用它可能会有些脆弱，并且有些棘手，直到您习惯了它的怪癖。

We’ll look first at the intended use of float. Then we’ll look at creating 2 and 3 column layouts and finish up by looking at how to deal with some of the tricky parts of floats; clearing them and dealing with container collapse.

我们首先来看一下float的预期用途。 然后，我们将介绍创建2列和3列的布局，并最后介绍如何处理浮点数的一些棘手部分。 清除它们并处理容器崩溃。

有可能的使用 (Intended use)

The float property accepts 3 values, left, right or none.

float属性接受3个值， left ， right或none 。

If we take an image and a couple of paragraphs of text and float the image to the left, we see the intended use of the float property on the web; the text wraps around the image, and everything looks great. We can move the image to the opposite side by setting float: right or remove it completely with float: none which is the default.

如果我们拍摄一张图像和几段文字，然后将其浮动到左侧，则可以在网上看到float属性的预期用途； 文字环绕图像，一切看起来都很棒。 我们可以通过设置float: right来将图像移到另一侧，或者使用float: none将其完全删除，这是默认设置。

img {
  float: left;
}

2列布局 (2-column layout)

We can take this further and float two blocks of content side by side to achieve a two-column layout.

我们可以更进一步，并排浮动两个内容块，以实现两列布局。

Here a main content container is given a width of 60% and floated to the left, and its left most edge aligns to the left most edge of its parent.

在此，主要内容容器的宽度为60％，并浮动到左侧，并且其最左侧的边缘与父级容器的最左侧的边缘对齐。

A sidebar is given a width of 30% and floated to the right. There is a gap of 10% between them which provides some breathing room.

边栏的宽度为30％，并浮动到右侧。 它们之间的差距为10％，这提供了一些呼吸空间。

.main-content {
  float: left;
  width: 60%;
}
.sidebar {
  float: right;
  width: 30%;
}

3列布局 (3-column layout)

So how can we make a 3-column layout?

那么，我们如何进行3列布局？

When a series of boxes are all floated in one direction, they align next to each other. This is because a floated element will align its left side with the leftmost edge of its parent or the nearest floated element. If all three boxes have a width of 33.333% and we are using box-sizing: border-box, we get an equal 3-column layout. For more info on box-sizing check out “Episode 2: Box-Model“.

当一系列盒子都沿一个方向浮动时，它们会彼此对齐。 这是因为浮动元素会将其左侧与其父元素或最近浮动元素的最左边缘对齐。 如果所有三个框的width均为33.333％，并且我们使用box-sizing: border-box ，则将得到相等的3列布局。 有关box-sizing更多信息，请查看“第2集： Box-Model ”。

.box {
  -moz-box-sizing: border-box;
       box-sizing: border-box;

  width: 33.333%;
  float: left;
}

We could achieve the same three columns by floating the boxes to the right instead. But in this case, the first box aligns its rightmost edge with the edge of the container and then the next box floats as far as it can go to the right and so on. The result here is the same but with the content order reversed — which can come in handy when dealing with source order in responsive design.

我们可以通过将框浮动到右侧来实现相同的三列。 但是在这种情况下，第一个盒子的最右边与容器的边缘对齐，然后下一个盒子尽可能地向右浮动，依此类推。 结果是一样的，但是内容顺序颠倒了—在响应式设计中处理源顺序时，这可以派上用场。

清理浮球 (Clearing floats)

Another property that goes hand in hand with float is clear.

与float另一个性质很clear 。

When elements float, they cause any adjacent element to try and flow around them which can cause layouts to look a bit weird. A classic example is a footer beneath two floated columns.

当元素浮动时，它们会使任何相邻的元素尝试在它们周围流动，这可能会导致布局看起来有些怪异。 一个经典的示例是两个浮动列下方的页脚。

Let’s take the two column layout from before and add some dimensions and some background colors so we can see what’s going on. If we now add a footer beneath the columns, we get a slightly strange behavior.

让我们以之前的两列布局为例，并添加一些尺寸和一些背景颜色，以便我们了解发生了什么。 如果现在在列下添加页脚，则会出现一些奇怪的行为。

This is because the footer is trying to flow around the two floated columns instead of starting beneath them. We can fix this by adding the clear property to the footer, which clears the effect of the floats on either side if setting it to both. Other available values are the same as float — left, right or none.

这是因为页脚试图绕过两个浮动的列，而不是从它们下面开始。 我们可以通过在页脚中添加clear属性来解决此问题，如果将footer设置为both ，则可以清除任一侧的float效果。 其他可用的值是相同的float - left ， right或none 。

footer {
  clear: both;
}

集装箱倒塌 (Container collapse)

Floats cause another layout problem which can sometimes be difficult to see.

浮动会引起另一个布局问题，有时可能很难看到。

Here I have a section with three floated elements inside of it. The section has a pink background – but that doesn’t appear to be visible. If we inspect element on this section we see that its height is 0.

在这里，我有一个带有三个浮动元素的部分。 该部分的背景为粉红色-但看不到。 如果我们在此部分检查元素，我们将看到其高度为0。

As the section only contains floated elements, it’s unable to automatically calculate the height it needs to contain the boxes.

由于该部分仅包含浮动元素，因此无法自动计算包含框所需的高度。

We could remedy this by adding a fourth element and setting the clear property on it. But this is clunky and adding an empty element that has a purely visual purpose is not good practice for writing clean markup.

我们可以通过添加第四个元素并在其上设置clear属性来解决此问题。 但这很笨拙，并且添加具有纯粹视觉目的的空元素并不是编写干净标记的好习惯。

.clear {
  clear: both;
}

Another option is to create a new block formatting context for the section which will contain all the floats within it.

另一个选择是为该部分创建一个新的块格式上下文，其中将包含其中的所有浮点数。

The float, position, display and overflow properties can all be used to create a new block formatting context when using certain values, but the most commonly used one that prevents container collapse is overflow: hidden.

使用某些值时， float ， position ， display和overflow属性都可以用于创建新的块格式设置上下文，但是防止容器崩溃的最常用方法是overflow: hidden 。

section {
  overflow: hidden;
}

If we remove the clearing <div> and set overflow: hidden on the section, the container collapse is fixed and the whole thing feels a lot less hacky.

如果我们删除清除<div>并在该部分设置了overflow: hidden ，则容器崩溃将得到修复，整个过程的安全性将大大降低。

Hiding the overflow of an element is not always possible though and any content that is intentionally overlapping or outside the boundaries of a box, will be hidden. A more robust way to deal with container collapse is to use a pseudo element to do the clearing. We’ll be tackling pseudo elements as the main topic in Episode 16 but here is a handy snippet for fixing container collapse in the meantime.

隐藏元素的overflow并不总是可能的，并且任何有意重叠或超出框的边界的内容都将被隐藏。 处理容器崩溃的一种更可靠的方法是使用伪元素进行清除。 在第16集中，我们将伪元素作为主要主题，但这是在此期间用于修复容器崩溃的便捷代码段。

/*source: Nicolas Gallagher*/
/*http://nicolasgallagher.com/micro-clearfix-hack/*/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

By adding this snippet to your CSS and adding the class of .clearfix to the element you want to prevent collapse on, the “invisible” :after pseudo element does the job of our clearing <div> from the earlier example.

通过将此片段添加到CSS并在要防止其塌陷的元素上添加.clearfix类，“ invisible” :after伪元素完成了前面示例中清除<div>的工作。

Now we solve the container collapse problem, don’t run into issues of hidden overflow and keep the markup as clean as possible which is a win-win.

现在，我们解决了容器崩溃的问题，不要遇到隐藏的溢出问题，并保持标记尽可能的干净，这是双赢的。

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

翻译自: https://www.sitepoint.com/atoz-css-screencast-float-and-clear/