Question

我有这个代码，我希望下面的段落保持对齐并且在下面：

<div class="content_hdr clearfix">
    <div class="clearfix content_hdr_heading">System Test</div>
    <div class="content_hdr_intro">
    <p>
Some text
    </p></div>
</div>

.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

div.content_hdr_heading {
    float: left;
    background: #ff9999;
}

我创建了这个fiddle

希望有人可以提供帮助。

Answer 1

<div class="content_hdr">
    <div class="content_hdr_heading">System Test</div>
    <div class="content_hdr_intro">
        <p>Some text</p>
    </div>
</div>

.content_hdr_heading {
    float: left;
    background: #ff9999;
}

.content_hdr_intro {
    clear: left;
}

因为在这种情况下浮动之后有一个清除元素，所以没有必要，但我通常把它放在浮动的包含元素上以保存头痛以及以下内容：

.content_hdr {
    overflow: hidden;
}

Answer 2

考虑一下：

HTML：

<div class="content_hdr">
    <div class="content_hdr_heading">
        <h2>System Test</h2>
    </div>
    <div class="content_hdr_intro">
        <p>Some text</p>
    </div>
</div>

CSS：

div.content_hdr_heading {
    overflow:auto;    
}

div.content_hdr_heading h2 {
    float: left;
    background: #ff9999;
}

现场演示： http://jsfiddle.net/simevidas/HmkMj/3/

Answer 3

p {clear：both; }

您不需要那里的clearfix。这似乎是多余的。如果它的标题标签使用h1，h2等

我怎样才能清除DIV

3 个答案: