Question

<div id="page">

    <div id="header">
        Header goes here.
    </div> <!--end of header -->

    <div id="main">

        <div id="photos">
            THIS IS FLOATED LEFT.
            Photos are dynamically added here.
        </div> <!--end of photos-->

    </div><!-- end of main-->

    <div id="footer">
        Footer goes here.
    </div><!-- end of footer -->

</div> <!-- end of page-->

在这段代码中，我试图动态地将照片添加到div“photo”，这是浮动LEFT。现在，当我尝试添加照片时会发生什么，我的页脚会升到标题。 div main具有背景颜色。在添加更多照片时，照片从主要内容出来，即在颜色内容之外。我已经为浮动元素使用了clear属性。请帮我理解错在哪里。任何帮助将不胜感激。

Answer 1

这个问题正在发生，因为浮动元素并没有真正占据页面布局中的任何垂直空间（因为允许其他元素环绕它们）。由于左浮动div“photos”是“main”div中的唯一内容，因此“main”div被视为没有垂直高度。这就是页脚直接出现在页眉下方的原因。

要解决此问题，您可以选择以下选项：

将其他内容添加到“未浮动的”主“div”
为“main”div指定固定高度（不是一个好的解决方案）
将“照片”div展开，并将主要div中的其他内容浮动到右侧
使用clear：right或clear：两者都在“photos”div css中。尽管

（存在其他选项）

Answer 2

尝试添加此行

<br style="clear: left; margin: 0; padding: 0;" />

</div><!-- end of main-->
<div id="footer">  Footer goes here.  </div>
<!-- end of footer -->    </div> 
<!-- end of page-->

动态添加照片以浮动左<div>导致页脚跳转到标题</div>

2 个答案: