html - 清除浮动

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

最终，这取决于您要完成的工作。

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

其他方法可能是使用绝对位置，或边距和固定宽度。但是这些都没有最终像要求浏览器将其放在右侧然后以 clear 内联方式呈现那样灵活。

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>

溢出方法很麻烦，诀窍是溢出隐藏和定义宽度，你需要注意盒子模型的大小，如果你想要像工具提示这样的东西，你会遇到麻烦，但除此之外很经典，很好用。

伪方法是最好的恕我直言，事实上我的 CSS 中总是有一个 .clear:after 。

额外标记方法是最糟糕的，因为您需要添加没有任何意义的元素并注意其他样式应用 width !important 左右。

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

在此处使用 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>