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只是爲了打破浮動？

回答

相關問題