html - 为什么我的 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。我期待clear:bothin .content imgwill override float:leftof .x-container img，但事实并非如此。

请问我怎样才能做到这一点？

Answer 1

用户 clearfix 类直接放在 image 上，这将完成所有工作，将 clearfix 类放在带有内容类的 div 上。

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

这应该解决它。

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

Answer 3

float并且clear是两个不同的 CSS 声明。它们不会相互覆盖。（尽管它们当然是相互关联/相互影响的。）如果你想覆盖你float:left的第一堂课，你可以简单地写：

.content img{
    float:none;
}

清除浮动是另一回事，您需要clear在兄弟元素上使用 ，或者overflow:auto|hidden在父元素上放置 ，或者应用所谓的“clear-fix”方法。

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

Answer 4

我认为您应该在 .content 类中指定 float:inherit

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

因为 float 属性默认设置为 none。 http://www.w3schools.com/cssref/pr_class_float.asp