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

Question

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

我有一些浮动元素,如侧边栏,除了内容区域浮动.如果我不在<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jim*_*Jim 6

您可以将包含元素overflow属性设置为除以外的值visible.

归档时间：	14 年，9 月前
查看次数：	23261 次
最近记录：	13 年，5 月前