html - Why my CSS is not overridden? -

<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> 

i have html above. expecting clear:both in .content img override float:left of .x-container img, not.

how can achieve please?

float , clear 2 distinct css declarations. don't override each other. (although relating to/influencing each other of course.) if want override float:left of first class can write:

.content img{     float:none; } 

clearing float thing, need use clear on sibling element, or put overflow:auto|hidden on parent element or apply called "clear-fix" method.

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