什么是清除CSS样式“float”的最好方法?

前端之家收集整理的这篇文章主要介绍了什么是清除CSS样式“float”的最好方法?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我很习惯使用< br style =“clear:both”/>来清除我的浮动广告。但东西不断变化,我不知道这是否是最好的做法。

有一个CSS hack(从positioneverything)可用,让你实现相同的结果,没有清除div。但是…他们声称黑客是一个过时的,而你或许应该看看this hack.但阅读通过700页的评论:)似乎可能有些地方后面的黑客不工作。

我想避免任何javascript黑客因为我希望我的清算工作,无论javascript是否启用。

什么是当前最佳实践,以浏览器独立方式清除div?

解决方法

更新:在2014年,您应该使用一个使用伪元素的修复技术,像@RodrigoManguinho提到的。这是清除浮动的现代方式。对于更新的方法,参见Nicholas Gallagher的微清晰度:
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

原始答案:

我真的不喜欢使用额外的非语义标记,所以我不使用清除元素。而不是只应用overflow:hidden;到浮点的父级以清除它们。工程交叉浏览器,没有问题。我相信overflow:auto;也工作。

显然,如果你想使用一个不同的overflow属性,但是由于IE6扩展盒的bug,我很少有理由溢出我的容器。

See more info on using overflow instead of clear to avoid adding extra markup

原文链接:https://www.f2er.com/css/223231.html

猜你在找的CSS相关文章