我怎么能执行一个明确的一个DIV的

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

p {明确：两者; }

你不需要你有那里的clearfix。这似乎是多余的。如果它的标题标签使用H1，H2等

Answer 3

考虑一下：

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/