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:both中的.content img会覆盖float:left的{{1}}，但事实并非如此。

我怎样才能做到这一点？

Answer 1

用户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 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”方法。 / p>

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

Answer 4

我认为你应该在.content class

中指定float：inherit

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

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

为什么我的CSS没有被覆盖？

4 个答案: