CSS：好的做法，使用div只是为了打破浮动？

如果这种良好做法？CSS：好的做法，使用div只是为了打破浮动？

<div> 
    <div style="float:left;"> 
     text a 
    </div> 
    <div style="float:right;"> 
     text b 
    </div> 
    <div style="clear:both;"></div> 
</div> 
<div> 
    text c 
</div>

即使我将“clear：both”应用于该div，我也有跨浏览器复杂性将边距应用于包含“文本c”的div。我已经能够在浮动元素之后立即将边缘应用于元素的最简洁的方式是应用“打破”div，其工作无非是打破浮动并重置下一个元素的线条。这是好的做法吗？

来源

2013-08-20 oceanic815

由于是清除不增加额外标记的浮动块的方法，为什么你要*使用额外的标记来做到这一点？ – cimmanon

不，应用明确：两个到最后的div应该工作（http://jsfiddle.net/j08691/kvMSM/1）和您的额外div是非语义的。 – j08691

这是clearfix问题。请参阅http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best –

我最近一直看到身边有很多这样的解决方案：

/* Clearing */ 
.clear:before, 
.clear:after, 
[class*="content"]:before, 
[class*="content"]:after, 
[class*="site"]:before, 
[class*="site"]:after { 
    content: ''; 
    display: table; 
} 

.clear:after, 
[class*="content"]:after, 
[class*="site"]:after { 
    clear: both; 
}

在你的榜样，你会应用此，你想被清除父DIV：

<div class="clear"> 
    <div style="float:left;"> 
     text a 
    </div> 
    <div style="float:right;"> 
     text b 
    </div> 

</div> 
<div> 
    text c 
</div>

来源

2013-08-20 18:39:56 Simalam

这是一个可笑的数量的CSS来做这么基本的事情。 – j08691

我认为很清楚（双关语）现在清除浮动的“非语义”div是最好的选择，因为它可以100％地工作并使用最少量的代码。 – oceanic815

@ oceanic815这就是询问“最佳实践”的问题，你会得到一堆意见。这不是什么意思。 – cimmanon

此问题的最佳解决方案是将overflow: auto;应用于第一个div。这样，您不需要特殊的清算元素，容器会自动扩展以适应浮动内容。

来源

2013-08-20 18:37:18 recursive

根据这篇文章http://stackoverflow.com/questions/211383/which-method-of-clearfix-is - 最好的溢出：汽车不适用于所有情况，但div明确：两者似乎每次都有效。但是，没有人曾经明确地表示过，除了“看起来”不专业外，其他都是好的或坏的做法。 – oceanic815

这是不可取的，因为它将非语义元素引入到您的html中。您提供的链接显示了一种在较旧的IE上使'overflow：auto'工作的方法，如果您需要支持，我建议这样做。 – recursive

CSS：好的做法，使用div只是为了打破浮动？

回答

相关问题