Question

我用浮动方式设置了一个图像：左边，可以预见的是，它出现在图像右侧之后的标题文本（如果它有帮助，这种情况的上下文是一个标识和标题，彼此相邻）网站标题）。

当我查看标题元素（h1）时，它会占用图像后面的空间（重叠）。文本仍然在图像旁边，但h1元素的背景与图像重叠。

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

这是浮动应该如何工作？背景是css框模型中填充的同义词吗？如果我希望header元素在图像之后完全开始，包括背景（这是我预期实际浮动的那样），该怎么办。

实际上不会影响标题的外观，因为它应该显示，但我很好奇，因为它会增加我对html和css网页设计的理解。

感谢。

Answer 1

将css代码修改为：

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

这应该有效。以下将生成图像左侧的标题。

Answer 2

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;
}

这是complete jsfiddle example

Answer 3

实际上，我想我找到了一个问题的答案。简而言之，似乎这就是浮动行为的工作原理。内容被推翻，但背景和边框仍然落后于浮动：

http://phrogz.net/CSS/understandingfloats.html#ascolumns

我不确定填充是否是背景的同义词，但我确实只是通过使背景颜色变为红色来测试标题元素“填充”，并且背景确实在浮动后面。就css盒模型而言，我仍然不太确定发生了什么。

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

3 个答案: