如何记账才能一目了然_一目了然

如何记账才能一目了然

One really common situation for web developers to run into is how to properly clear their floats. There are numerous approaches that have been discussed and used, but only recently have I come across a method that I believe is superior to the rest of the ones I had used up to now. In this post, we will first take a look at the problem caused by floats, and then we will look at some of the ways of fixing that problem.

Web开发人员遇到的一种真正常见的情况是如何正确清除浮动信息。 已经讨论和使用了许多方法，但是直到最近，我才发现一种方法，我认为它比我迄今为止使用的其他方法要好。 在本文中，我们将首先研究由浮点数引起的问题，然后我们将探讨解决该问题的一些方法。

There are some simple styles that will stay consistent throughout the examples:

在整个示例中，有一些简单的样式将保持一致：

#wrap{
    border: 1px solid #000;
}
.main{
    float: left;
    width: 70%;
}
.side{
    float: right;
    width: 25%;
}

The problem is that when you float an item, you are taking it out of the normal flow of the document, so other elements on the page act as if the floated element is not there. You can see this below (I am using white on black in my examples so they stand out more):

问题是，当您浮动一个项目时，您会将其从文档的正常流程中移除，因此页面上的其他元素的行为就像浮动的元素不在其中一样。 您可以在下面看到它(我在示例中使用的是白底黑字，因此它们更加突出)：

As you can see, #wrap doesn’t see .main or .side because they are floated, so our border doesn’t extend down. There are numerous proposed solutions to this problem.

如您所见，＃wrap看不到.main或.side，因为它们是浮动的，因此我们的边界不会向下延伸。 有许多针对此问题的建议解决方案。

额外加价 (Extra Markup)

One method that is tried and true, is to add another element inside of #wrap after both of the floats. For example, you could use a div with the class of bottomfix. Now you just set the style of bottomfix to be clear:both, and your wrap will now extend to contain the floats and the bottomfix.

一种尝试且正确的方法是在两个浮点数之后在#wrap中添加另一个元素。 例如，您可以将div与bottomfix类一起使用。 现在，您只需将bottomfix的样式设置为clear:both ，然后您的换行将扩展为包含浮点数和bottomfix。

Obviously, if we are shooting for separation of presentation and content (as we should be), this is not an ideal situation. We now have an element in place simply to create a presentational effect.

显然，如果我们正在努力将表示和内容分离(应该如此)，那么这不是理想的情况。 现在，我们有一个元素可以简单地创建演示效果。

Instead, let’s take a look at some ways of creating the same effect using only CSS. To do so, you have to have a very brief understanding of how Internet Explorer handles floats.

相反，让我们看一些仅使用CSS来创建相同效果的方法。 为此，您必须对Internet Explorer如何处理浮点数有一个非常简短的了解。

IE浮动广告 (IE Floats)

So far it may seem that Internet Explorer (IE) handles floats the same as other browsers, but as we look a little closer, we see that is not the case. Internet Explorer has a proprietary property called hasLayout. For the purpose of this article, just understand that for an element to have “layout”, in more cases than not it will need either a width or a height. hasLayout can only be affected indirectly by your CSS styles, there is no hasLayout declaration.

到目前为止，似乎Internet Explorer(IE)的处理浮点数与其他浏览器相同，但是当我们仔细观察时，发现情况并非如此。 Internet Explorer具有称为hasLayout的专有属性。 出于本文的目的，请理解，要使元素具有“布局”，在更多情况下，它需要宽度或高度。 hasLayout只能间接受到CSS样式的影响，没有hasLayout声明。

Why is this important to know? Because if an element’s hasLayout property is equal to true, that element will auto-contain the float elements. What this means, is that to get IE to clear the floats, we really only have to add width: 100% to #wrap. Now #wrap’s hasLayout property is equal to true, and it will now automatically extend to contain the two floated elements.

为什么要知道这一点很重要？ 因为如果元素的hasLayout属性等于true，则该元素将自动包含float元素。 这意味着要使IE清除浮点数，我们实际上只需要增加width: 100% #wrap就要增加width: 100% 。 现在，＃wrap的hasLayout属性等于true，它将自动扩展为包含两个浮动元素。

It’s far from being ideal though. While #wrap will now extend properly, we have to be careful about our margins. Elements on the page may respect the containing element (#wrap), but they will not respect the floated elements.

但是，这远非理想。 尽管#wrap现在可以正确扩展，但我们必须注意边距。 页面上的元素可能会包含元素(#wrap)，但不会考虑浮动元素。

To show this, let’s add another div with an id of next. We’ll give this div a 1 pixel pink border just so it stands out. Let’s also add a 10px bottom margin to the main element. The results in IE are shown below:

为了显示这一点，让我们添加另一个ID为next的div。 我们给这个div一个1像素的粉红色边框，以使其突出。 我们还要在主元素上添加10px底边距。 IE中的结果如下所示：

As you can see, by adding the width to #wrap, IE will now allow #wrap to contain the floats. You can also see that our 10px margin had no effect. In fact, the top margin of our first paragraph, and bottom margin of our last paragraph are also ignored in IE. So, if you want some space here, you need to use padding, not margins. You can also set a margin to #wrap…since it is the containing element, it’s margins are still respected.

如您所见，通过将宽度添加到#wrap中，IE现在将允许#wrap包含浮点数。 您还可以看到我们的10px边距无效。 实际上，在IE中也忽略了我们第一段的上边距和最后一段的底边距。 因此，如果您想在此处留一些空间，则需要使用填充而不是边距。 您还可以将边距设置为＃wrap…，因为它是包含元素，所以仍然要遵守它的边距。

继续 (Moving On)

So now we have cleared the floats in IE, and we understand why. What about the other browsers though? Most will allow you to use the :after pseudo-class to add some content and have that content clear the floats.

因此，现在我们已经清除了IE中的浮动信息，并且我们理解了原因。 但是其他浏览器呢？ 大多数将允许您使用:after伪类添加一些内容，并使该内容清除浮点数。

#wrap:after{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

What this does in the browsers that recognize it is add a period after the content of #wrap and have it clear the floats. We then use the height and visibility properties to make sure the period doesn’t show up. Remember, IE still needs to have “layout” on #wrap because it doesn’t recognize the :after pseudo class.

在识别它的浏览器中，这是在#wrap内容后添加一个句点并清除浮点数。 然后，我们使用高度和可见性属性来确保期间不显示。 记住，IE在#wrap上仍然需要“布局”，因为它无法识别:after伪类。

One problem…IE/Mac doesn’t auto clear, and doesn’t recognize the :after pseudo class. So we have to use some hacks to get IE/Mac and IE/Win to play nicely together. I won’t be getting into this, you can find a really nice article about it at Position Is Everything.

一个问题……IE / Mac无法自动清除，也无法识别:after伪类。 因此，我们必须使用一些技巧来使IE / Mac和IE / Win更好地协同工作。 我不会涉及到这一点，您可以在Position Is Everything上找到一篇非常不错的文章。

更简单的方法 (An Easier Way)

Thankfully, there is an easier way that has been credited to Paul O’Brien. For most browsers to clear the float we simply need to add overflow: hidden to #wrap. Just make sure that there is also a width on #wrap so it has “layout” in IE and you are good to go. Our CSS ends up looking like this:

值得庆幸的是，有一种更简单的方法可以归功于Paul O'Brien 。 对于大多数浏览器来说，清除浮点数只需要添加overflow: hidden到#wrap中。 只需确保在#wrap上也有一个宽度，以便它在IE中具有“布局”，您就可以开始使用了。 我们CSS最终看起来像这样：

#wrap{
    border: 1px solid #000;
    width: 100%;
    overflow: hidden;
}
.main{
    float: left;
    width: 70%;
}
.side{
    float: right;
    width: 25%;
}

No seriously….that’s it. #wrap will now fully contain both the floats. Just keep in mind that if you want to add some space around either of the floated elements, you will want to use padding instead of margins because otherwise IE will ignore it.

不严重...就是这样。 #wrap现在将完全包含两个浮点数。 请记住，如果要在任一浮动元素周围添加一些空间，则将要使用填充而不是边距，因为否则IE会忽略它。

翻译自: https://timkadlec.com/2007/12/one-clear-to-rule-them-all/

如何记账才能一目了然