清除float的效果的方法 [英] methods of clearing float's effects

问题描述

有很多方法可以清除浮动，以确保包含所有后代的包含浮动子项的包含块。

There're dozens of ways to clear float in order to make sure the containing block containing all his descendents including floating children.

1. 使用标记：< div style =clear：both;>< / div>


2. 创建新的块格式上下文：
   
   
   
   • 是浮动的
   
   
   • 是绝对定位的
   
   
   • 的更多不寻常的属性（表格单元格等）
   
   
   • 溢出
   
   

1. using markup:<div style="clear:both;"></div>
2. Creating a new block formatting context:
   • is floated
   • is absolutely positioned
   • has a display property value of one of more unusual properties(table-cell,etc.)
   • overflow

我的问题是：有没有其他方法？

My Question is : is there any other method?

非常感谢您的帮助！

推荐答案

您的问题中没有涵盖的一些方法：

Some methods you didn't cover in your question:

• display：inline-block - 我真的不会这么认为不寻常的显示值 ，虽然它通常不用于清除浮动，因为它的副作用（例如收缩包装）： http：// jsfiddle。 net / CLXbc /



• clearfix 类 - 这是一种常见技术 - http://jsfiddle.net/CLXbc/1/

• display: inline-block - I wouldn't really count that as "an unusual display value", although it's not usually used to clear floats because of it's side effects (such as shrink-wrapping): http://jsfiddle.net/CLXbc/

• The clearfix class - this is a common technique - http://jsfiddle.net/CLXbc/1/

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

到目前为止， overflow：hidden 和 clearfix 。

其他选项，这里是为什么它们不是最优的：

Going through your other options, here's why they aren't optimal:

• 使用markup：< div style = ：both;>< / div> - 这不是语义。 c $ c $ c> - 这个工程，但你通常不想要收缩包装。


• 绝对定位通常不希望您的元素被绝对定位。


• 具有一个更常见属性（表格单元格等）的显示属性值 - - display：table-cell 在IE7中无法工作..再次，你不想要副作用。 >


• "using markup:<div style="clear:both;"></div>" - this is not semantic. Splattering clearing divs throughout your HTML is a poor choice.
• "is floated" - this works, but you don't usually want the shrink-wrapping.
• "is absolutely positioned" - you don't usually want your element to be absolutely positioned.
• "has a display property value of one of more unusual properties(table-cell,etc.)" - display: table-cell doesn't work in IE7.. and yet again, you don't want the side effects.

在大多数情况下，我使用 overflow：hidden 有时我无法使用，例如这里。在这些情况下，我通常会回退到 clearfix 。

I use overflow: hidden in most cases. Sometimes I can't use that, for example here. In those cases, I usually fallback to clearfix.

这篇关于清除float的效果的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！