浮动元素之后的元素位置和尺寸

如何解决浮动元素之后的元素位置和尺寸

| 我为图片设置了float：left样式，并且可以预见的是，标题的文本出现在图片的右边（如果有帮助，这种情况的上下文是徽标和标题，在标题的旁边彼此相邻）网站）。当我查看标头元素（h1）时，它占据了图像后面的空间（重叠）。文本仍在图像旁边，但是h1元素的背景与图像重叠。

<div id=\"header\">
  <a href=\"index.html\"><img src=\"logo2.png\" /></a>
  <h1>AlanHoRizon</h1>
  <p>
...
#header img {
    float: left;
}

这应该是浮动的吗？背景是CSS Box模型中的填充的同义词吗？如果我希望header元素在图像之后完全开始，包括背景（这是我期望float实际执行的操作）怎么办？实际上并不会影响标题的外观，因为一切看起来都应该正确，但是我很好奇，因为它会加深我对html和css网站设计的理解。谢谢。

解决方法

HTML：

<div id=\"header\">
    <a href=\"\"><img id=\"logo\" src=\"http://lorempixum.com/100/100/abstract\" alt=\"\" /></a>
    <div>
        <h1>AlanHoRizon</h1>
        <h3>Site description</h3>
    </div>
</div>
<div id=\"content\">
    <p>Lorem ipsum dolor ...</p>
</div>

CSS：

#header:after {
    display: block;
    clear: both;
    content: \".\";
    visibility: hidden;
    height: 0; 
    line-height: 0;
}
#logo {
    float: left;
}
#header div {
    float: left;
    padding: .25em;
}

这是完整的jsfiddle示例 , 修改CSS代码以：

h1
{
float:left;
}
img
{
float:left;
}

这应该工作。以下将在图像的左侧产生标题。 , 实际上，我认为我找到了问题的答案。简而言之，似乎这就是浮动行为的工作方式。内容被推送，但是背景和边框仍然位于浮动后面： http://phrogz.net/CSS/understandingfloats.html#ascolumns 我不确定填充是否与背景同义，但是我只是通过将背景颜色设置为红色来测试了标头元素“ padding \”，而背景确实在浮动后面。就css盒模型而言，我仍然不太确定发生了什么。