元素不会彼此相邻，而是在另一个元素下面呈现

Question

为什么这两个元素并不相邻？

Demo

HTML

<div> 
    <p>I'm a paragraph and I'm on the left!!!</p> 
    <h3>I'm a header and I'm on the right</h3> 
</div>

CSS

div p{
    float: left;
    width:30%;
    border: 1px solid blue;
}

div h3{
    clear: both;
    float:left;
    width:10%;
    border: 1px solid red;
}

我想通过给h3 clear: both p会使用{{1}}旁边的空白区域。

但它没有用。任何人都可以解释原因吗？

Answer 1

他们并非紧挨着，因为您使用h3禁用了clear:both的任何左侧浮动。删除它，他们会。像http://jsfiddle.net/vHph8/

一样

Answer 2

css clear属性会重置浮动，实际上会导致布局在所有浮动材质下进行。

如果你从css中删除它，它就可以了（jsfiddle：here）。