Question

我有一些浮动元素，比如在内容区域之外浮动的侧边栏。如果我不在侧边栏的末尾添加<br clear="both"/>，那么页脚和部分背景会浮动怪异。

我想念的任何快速解决方案？

谢谢。

编辑例如，我希望边框没有间隙，背景也应该没有空格。应该看起来像两个部分：1）内容与侧边栏2）页脚

    <!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>layout</title>

    <style type="text/css">

    body {
        margin:0;
        padding:0;
    }

    #main {
        background:#cfcfcf;
    }

    .inner {
        margin: 0 auto;
        padding: 96px 72px 0;
        width: 1068px;
        border-color: #000;
        border-style: solid;
        border-width: 0 1px;
        color: #3C3C3C;
    }

    .post {
        width: 705px;
        background:#999;
        float:left;
    }

    #comments, #respond {
        background:#999;
    }

    #sidebar {
        background:#777;
    }

    #footer {
        clear:both;
        background:gray;
    }

    </style>
</head>
<body>

    <div id="main">

        <div class="inner">

            <div id="post" class="post">

                <h2>Lorem Ipsum Test Page</h2>

                <div class="entry">

                    <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                </div> <!-- entry -->

            </div> <!-- post -->

            <div id="sidebar">

                <h2>Meta</h2>
                    <ul>
                        <li>Login</li>
                        <li>Anything</li>
                    </ul>

                <h2>Subscribe</h2>
                    <ul>
                        <li>Entries (RSS)</li>
                        <li>Comments (RSS)</li>
                    </ul>

            </div> <!-- sidebar -->

        </div> <!-- inner -->

    </div> <!-- main -->

    <div id="footer">
        <div class="inner">

        Something

        </div> <!-- inner -->
    </div> <!-- footer -->

</body>
</html>

Answer 1

您可以将包含元素overflow属性设置为visible以外的其他属性。

Answer 2

说实话，我不会试图绕过它。你可以像其他人建议的那样把明文放在页脚里;但是你不能保证你的html的其他部分不会被错误地浮动或阻止。如果你采用的政策只是在你的html的随机部分由于花车而弄乱时清除元素;你可能会养成这样做的习惯。相反，以下是一个样式的示例，通常可以保证其他元素不会被错误地浮动：

<div>
  <div style="float:right;"></div>
  <div style="float:right;"></div>
  <!--Add a clear div as last sibling of any floated elements-->
  <div style="clear:both;"></div>
</div>

另外，我会使用空div而不是br。但这只是我。

从你的例子中得出：

        </div> <!-- post -->

        <!-- insert empty clear div hear -->
        <div style="clear:both;"></div>

        <div id="sidebar">

Answer 3

你可以制作页脚，使其具有clear: both的样式。

Answer 4

正确的方法是清除左侧和右侧的下一个元素。

所以在页脚上你可以添加：

#footer {
    clear: both;
}

这会强制页脚下到下一行，这是'正确'的方式。稍后更改设计也会更容易，因为您不必更改标记，只需更改CSS。

Answer 5

display: inline-block;非常好。太糟糕的IE并不真正支持它。

浮动元素<br clear="both"/>用更好的CSS方式？

5 个答案: