Question

我的页面左侧是标准导航栏，内容区域占据了水平区域的其余部分。对于现代浏览器，我使用table-row和table-cell值作为display属性。但是，对于IE7，我添加了一个试图浮动导航栏的条件样式表。

这种方法很好，除非内容区域本身有浮动元素，我尝试使用clear。我的目标是在内容区域浮动后立即显示清除元素，而是将其推到导航区域下方。

以下演示代码显示了此问题。我的目标是让表格显示在“leftThing”和“rightThing”的正下方，但是它们与表格之间存在很大差距。

<html>
    <head>
        <title>Float Test</title>

        <style type="text/css">
            #body {
                background: #cecece;
            }

            #sidebar {
                background: #ababab;
                float: left;
                width: 200px;
            }

            #content {
                background: #efefef;
                margin-left: 215px;
            }

            #leftThing {
                background: #456789;
                float: left;
                width: 100px;
            }

            #rightThing {
                background: #654321;
                float: right;
                width: 100px;
            }

            table {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="body">
            <div id="sidebar">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                    <li>Three</li>
                </ul>
            </div>
            <div id="content">
                <div style="position: realtive;">

                <div id="leftThing">
                ABCDEF
                </div>
                <div id="rightThing">
                WXYZ
                </div>

                <table>
                    <thead>
                        <th>One</th>
                            <th>Two</th>
                        </thead>
                        <tr>
                                <td>Jason</td>
                        <td>45</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>41</td>
                    </tr>
                </table>

                <p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p>
            </div>

            </div>
        </div>
    </body>
</html>

感谢您的帮助。

Answer 1

只需在桌面上清除，然后清除底部的导航栏。请参阅下面的更新代码。

<html>
    <head>
        <title>Float Test</title>

        <style type="text/css">
            #body {
                background: #cecece;
            }

            #sidebar {
                background: #ababab;
                float: left;
                width: 200px;
            }

            #content {
                background: #efefef;
                margin-left: 215px;
            }

            #leftThing {
                background: #456789;
                float: left;
                width: 100px;
            }

            #rightThing {
                background: #654321;
                float: right;
                width: 100px;
            }

            table 
            {
             clear: right;
            }
        </style>
    </head>
    <body>
        <div id="body">
            <div id="sidebar">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                    <li>Three</li>
                </ul>
            </div>
            <div id="content">
                <div>
                    <div id="leftThing">ABCDEF</div>
                    <div id="rightThing">WXYZ</div>
                    <table>
                        <thead>
                            <th>One</th>
                            <th>Two</th>
                        </thead>
                        <tr>
                            <td>Jason</td>
                            <td>45</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>41</td>
                        </tr>
                    </table>
                    <p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

Answer 2

这里的解决方案： Block formatting contexts

因此，如果您的“内容”块处于绝对位置，或浮动，或显示内联块，等等=＆gt;子元素的clear属性不会扩展到“content”块之外（在您的情况下，扩展到侧边栏）。

清除浮动问题

2 个答案: