Clear float issue_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-24 05:28 出处：网络

相关专题：css

I have a page with the standard navigation bar on the left and the content area taking up the rest of the horizontal area to its side. For modern browsers I am using table-row and table-cell values for the display attribute. However, for IE7 I included a conditional stylesheet that tries to float the nav bar.

This works fine except when the content area itself has floated elements and I try to use clear. My goal is to displayed the clear element right after the content area floats but instead it gets shoved down below the nav area.

The following demo code shows this issue. My goal is to get the table to display right below the "leftThing" and "rightThing" but instead there is a large gap between them and the table.

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

Thank you for your help.

Just clear right on the table, and then clear the nav at the bottom. See updated code below.

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

Solution here : Block formatting contexts

So if your "content" block is in absolute position, or floating, or displayed inline-block, etc => the clear property of child elements will not be extends outside the "content" block (in your case, extends to your sidebar).

Clear float issue

精彩评论

关注公众号

热门标签

图文推荐

Clear float issue

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：