Question

我有一个浮点数div：left，div之后是页面的其余部分。为了使页面的其余部分保持在div之下，我必须首先放置一个

<br clear="all">

问：如何将页面的其余部分放置在浮动div下面？我认为我需要将页面的其余部分包装在一个新的div中并将其浮动。但我倾向于尽可能地远离浮子。

Answer 1

在你漂浮的div之后

。添加以下代码。

<div style='clear:both'></div>

然后像往常一样继续浏览页面的其余部分。

Answer 2

在下一个项目中，您可以使用样式clear:left。

另一种方法是在浮动元素的父元素上设置overflow样式以使其包含它，如overflow:hidden。

Answer 3

我通常用浮动div包围另一个div，样式为overflow: auto

Answer 4

创建一个类并插入CSS：

br.cb { clear: both; }

插入HTML：

<br class="cb">

这使它通过了W3标记和CSS验证器。

Answer 5

<!DOCTYPE html>
    <html>
    <link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
    <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        body {
        margin: 0;
        padding: 0;
        background-color: #EFEFEF;
        font-family: sans-serif;
    }

    .homepage-window {
        height: 100vh;
        display: flex;
    }

    .nav-bar {
        width: 18%;
        background-color: #2E3E4E;
    }

    .bar-manager {
        width: 100%;
    }

    .top-bar {
        display: flex;
        align-items: center;
        height: 7%;
        width: 100%;
        background-color: white;
        border-bottom: 0.5px solid lightgrey;
    }

    .top-bar p {
        margin-left: 10px;
        font-weight: lighter;
    }

    .bottom-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 9%;
        width: 100%;
    }

    .bottom-bar h1 {
        margin-left: 10px;
        font-weight: normal;
        font-size: 12px;
    }
    </style>
    <head>
        <title>Cold-Ops Homepage</title>
    </head>
    <body>
        <div class="homepage-window">
            <div class="nav-bar">   
            </div>
            <div class="bar-manager">
                <div class="top-bar">
                    <p>Homepage</p>
                </div>
                <div class="bottom-bar">
                    <h1>Welcome, Omard2000</h1><br>
                    <p>some text</p>

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

br clear =“all”vs css解决方案

5 个答案: