Question

最近，我在每个<div style="clear:both;"></div>元素之后使用div float: left/right属性。

现在我正在进行新闻系统的循环，并希望将一些元素浮动到右侧。

问题是：在每个浮点数之后使用clear: both;属性是一个好习惯吗？如果我不应该使用它，有什么好的替代品吗？

我目前的新闻HTML是这样的：

<div id="news">
     <div class="date" style="float: right;">06-05-2013</div>
     <div style="clear:both;"></div>

     <div class="text">[...]</div>

     <div id="comment-block" style="float: right;">Comment on this news</div>
     <div style="clear:both;"></div>
</div>

Answer 1

在我看来，更好的解决方案是

<强> HTML：

<div id="news">
    <div class="group">
        <div class="date" style="float: right;">06-05-2013</div>
    </div>
    <div class="text">[...]</div>
    <div class="group">
        <div id="comment-block" style="float: right;">Comment on this news</div>
    </div>
</div>

<强> SCSS：

.group {
    &:before, &:after {
        content:"";
        display: table;
    }
    &:after {
        clear: both;
    }
    .lt_ie8 & {
        zoom: 1;
    }
}

Answer 2

最终，这取决于你想要实现的目标。

如果您有一些相对定位元素的嵌套，并且您希望某些内部子项位于左侧或右侧而不影响其他子级，那么浮动和立即清除是实现此目标的更为实用的方法之一。 p>

其他方式可能是使用绝对位置，边距和固定宽度。但这些都不是最终只是要求浏览器将其放在右侧，然后以明确的方式内联呈现。

Answer 3

嗯，你可以：

http://jsfiddle.net/qzbNr/6/

<强> CSS

div.floats {
    padding: 10px;
    background-color: #eee;
    margin: 10px 0;
}

div.floats > div {
    float: left;
    width: 20px;
    height: 20px;
    background-color: #333;
}

div.floats > div + div {
    margin-left: 10px;
}

div.overflow-hidden {
    overflow: hidden;
}

div.box-sizing {
    width: 100%;
    box-sizing: border-box;
}

div.known-width {
    /* 200px - 2 * 10px of padding */
    width: 180px;
}

div.calc {
    width: calc(100% - 20px);
}

div.after-pseudo:after {
    content: "";
    display: block;
    clear: both;
}

div.clear {
    float: none !important;
    clear: both !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

<强> HTML

<div class="floats overflow-hidden box-sizing">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden known-width">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden calc">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats after-pseudo">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats extra-markup">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

溢出方法很乱，诀窍是溢出隐藏和定义宽度，你需要注意盒子模型大小，如果你想要像工具提示那样出来，你会遇到麻烦，但除此之外是经典之作，效果还不错。

伪方法是最好的恕我直言，事实上我总是有一个.clear：在我的CSS之后。

额外标记方法是最糟糕的，因为你需要添加任何不重要的元素，并注意应用宽度的其他样式！重要的左右。

Answer 4

取决于您希望网站的外观。通常，清除浮动对于父元素正确设置其高度非常重要。

但是我会注意到，使用类来清除内联样式的元素可能更有用。

尝试这样的事情：

.clear
{
    clear:both;
}

只需使用：

<div class="clear"></div>

这样，它允许您为清算div执行或调整任何其他样式，而无需手动编辑每个样式的内联样式。

Answer 5

有时，清除浮动确实是正确/最好的事情，但是内联样式（几乎完全）是坏的，而css类应该以意思而不是样式命名。 CSS最强大的功能之一是将内容与演示文稿分开。

包含浮动而不是使用清除几乎总是更好，并且总是更好地包含而不是使用内联样式或非语义类名。

通过创建块格式上下文，有几种方法可以包含浮点数 - 请参阅https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context

http://colinaarts.com/articles/float-containment/的更多信息和快速教程（特别是“不该做的事”部分）

也就是说，在你的问题的特定情况下，你需要实现相同的布局是对齐文本，如@Juhana评论。示例代码;

HTML

<div id="news">
     <div class="date">06-05-2013</div>
     <div class="text">[...]</div>
     <div class="comment-block">Comment on this news</div>
</div>

CSS

.date,
.comment-block {
    text-align: right;
}

Answer 6

USE CLEARFIX链接http://www.webtoolkit.info/css-clearfix.html

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}




    <div id="news">
    <div class="group clearfix">
        <div class="date" style="float: right;">06-05-2013</div>
    </div>
    <div class="text">[...]</div>
    <div class="group clearfix">
        <div id="comment-block" style="float: right;">Comment on this news</div>
    </div>
   </div>

清除浮子

6 个答案:

HTML

CSS