爲什麼我的CSS沒有被覆蓋？

Question

<style type="text/css"> 
.x-container img { 
    float: left; 
    margin-right: 15px; 
} 
.content img{ 
    clear:both; 
} 
</style> 

<div class="x-container span-18"> 
    <div class="content"> 
     <img src="image.jpg" id="disneland-img"> 
    </div> 
    <h2>Hello</h2> 
</div> 

我有像上面這樣的html。我期待在.content imgclear:both將覆蓋float:left.x-container img，但它不是。

我該如何做到這一點？

Answer 1

float和clear是兩個不同的CSS聲明。他們不會互相推翻。 （雖然他們與/相互影響當然）。如果你要替換自己的一流的float:left可以簡單的寫：

.content img{ 
    float:none; 
} 

清除浮動是另一回事，你需要使用clear在兄弟元素上，或者在父元素上放置一個overflow:auto|hidden或應用所謂的「clear-fix」方法。

.clearfix:after { 
    content:""; 
    display:table; 
    clear:both; 
} 

Answer 2

用戶clearfix類圖像上的直接，這將做所有的工作 把div上的clearfix類與內容類。

<div class="x-container span-18"> 
    <div class="content clearfix "> 
    <img src="image.jpg" id="disneland-img"> 
    </div> 
<h2>Hello</h2> 
</div> 

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

http://jsfiddle.net/wikijames/TVm6K/

Answer 3

這應該修復它。

.x-container img { 
    float: left; 
    margin-right: 15px; 
} 
.x-container h2 { 
    display: block; 
    clear: both; 
} 

Answer 4

我認爲你應該指定浮動：因爲默認情況下浮動屬性設置爲none。內容類

.content img{ 
    float:inherit; 
    clear:both; 
} 

繼承。 http://www.w3schools.com/cssref/pr_class_float.asp