如何避免空清除div？

I have been using a lot of floats recently like this:

我最近一直在使用很多漂浮物:

<div id="buttons">
  <input type="button" id="btn1" value="Button One">
  <input type="button" id="btn2" value="Button Two">
  <input type="button" id="btn3" value="Button Three">
</div>

Sometimes I'll float a button to the right. Sometimes I'll float all of them to the right. This is where the problem starts. It really throws the flow off if I do that so I have to keep putting in these:

有时我会向右边的按钮浮动。有时我会将它们全部漂浮在右边。这是问题开始的地方。如果我这样做,它真的会抛弃流量,所以我必须继续投入这些:

<div style="clear:both;"></div>

at the end. That throws off the layout if I'm not floating them all.

在末尾。如果我没有将它们全部浮动,那将抛弃布局。

Is there a good solution to this?

有一个很好的解决方案吗?

5 个解决方案

#1

Yes, use overflow: hidden on the container ie:

是的,使用overflow:隐藏在容器上,即:

<style type="text/css">
#buttons { overflow: hidden; }
</style>

#2

This is a big part of the CSS learning curve. When you float items, their containing element no longer takes the vertical height of the floated elements into account. There are a couple of solutions you could use to get around your dilemma.

这是CSS学习曲线的重要组成部分。浮动项目时,其包含元素不再考虑浮动元素的垂直高度。您可以使用几种解决方案来解决您的困境。

Simply specify a hight for your #button container to the hight of your buttons:

只需为你的按钮高度指定#button容器的高度:

#button { height: 30px; }

A fancier solution would be the clearfix hack. It's pretty bullet proof and will also do the trick without the need to add the extra markup and inline CSS.

一个更好的解决方案是clearfix hack。它非常具有防弹功能,并且无需添加额外的标记和内联CSS即可完成。

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

#buttons {
    display: inline-block;
}

html[xmlns] #buttons {
    display: block;
}

* html #buttons {
    height: 1%;
}

#3

When you float items with CSS, they're removed from the natural flow state of the page.

使用CSS浮动项目时,它们将从页面的自然流状态中删除。

If they're in a container DIV, that will shift the item out and have its parent not see where the child elements have gone. The container would then shrink back to boxing as much of the area as if the elements were not even there in the first place.

如果它们位于容器DIV中,则会将项目移出并让其父项看不到子元素的去向。然后容器将缩回到拳击区域,就好像元素首先不在那里一样。

In order to cover for that, you have to specify overflow:hidden for the property of the container.

为了覆盖它,您必须为容器的属性指定overflow:hidden。

By default, it is set to visible and will allow anything to just "fall out" of the box if it has been floated as such.

默认情况下,它被设置为可见,如果它已经浮动,将允许任何东西“掉出”框。

Correct it by setting this in your CSS:

通过在CSS中设置它来纠正它:

#buttons 
{
    overflow:hidden;
}

This will now constrain the floating elements to show within the context and confines of the parent DIV.

现在,这将限制浮动元素在父DIV的上下文和范围内显示。

#4

As long as you define the overflow of the parent, it will clear all floats.

只要您定义父级的溢出,它将清除所有浮点数。

Use overflow:auto on the parent, and your good to go!

在父母身上使用溢出:自动,你好好去!

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

(I have heard this works using display:inherit as well, but have not tried.)

(我听说这可以使用display:inherit,但还没试过。)

#5

Usually, the best options are the clearfix method or the method of setting 'overflow: hidden' on the containing parent.

通常,最好的选项是clearfix方法或在包含父级上设置'overflow:hidden'的方法。

In your specific example you do have another option: you could not float any of the inputs at all, and set 'text-align: right' on #buttons

在您的具体示例中,您还有另一个选项:根本不能浮动任何输入,并在#buttons上设置'text-align:right'

#buttons {
    text-align: right;
    }

While I rely on 'overflow: hidden' quite a bit, it is worth noting that if you're trying to position any elements outside (or partially outside) of the containing element that has 'overflow: hidden' set on it, the positioned elements will be clipped off at the boundary of the containing element. (this doesn't come up too often, but is a "gotcha" to look out for.)

虽然我依赖'溢出:隐藏'相当多,但值得注意的是,如果你试图将任何元素放置在包含'overflow:hidden'的包含元素的外部(或部分外部),则定位元素将在包含元素的边界处被剪切掉。 (这种情况并不常见,但需要注意的是“陷阱”。)

You might also find the blog post "Lessons Learned Concerning the Clearfix CSS Hack" by Jeff Starr interesting.

您可能还会发现Jeff Starr博客文章“关于Clearfix CSS Hack的经验教训”很有趣。

#1