br clear="all" vs css 解决方案答案

【问题标题】：br clear="all" vs css solutionbr clear="all" vs css 解决方案
【发布时间】：2011-11-03 01:29:14
【问题描述】：

我有一个浮动：左的 div，在 div 之后是页面的其余部分。为了让页面的其余部分保持在 div 下面，我必须先放置一个

<br clear="all">

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

【问题讨论】：

你能把它摆弄一下/贴一个例子来说明你的意思吗？
html 是什么样子的？
在html5中，br标签没有这个属性。
br with prop clear: both 是在浮动垂直流之后清除并保持下一个元素的边距顶部完整的唯一方法。但是，一个技巧是在清除元素上使用伪。示例 <h2>Im a heading after floating stuff and usally I got 20px margin top</h2> 然后 CSS：h2:before { content: ""; display:table; margin-bottom: 20px; } 这只有在 <h2> 没有应用背景样式或边框顶部时才有用，因为随后将包含伪。但是对于简单的 div 和包装器，这很有效。

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

创建一个类并插入 CSS：

br.cb { clear: both; }

插入 HTML：

<br class="cb">

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

【讨论】：

+1 我在很多地方都需要这个，而且它比不自动关闭的 div 标签更短、更清晰。

【解决方案3】：

在您浮动的 div 之后。添加以下代码。

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

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

【讨论】：

我经常使用这个，但不明白为什么它比使用 br 标签更好。此外，如果您制作（意外）自关闭 div，VisualStudio 不会标记错误，但我确实有过令人毛骨悚然的 javascript 不当行为。所以这个解决方案是错误的来源。

【解决方案4】：

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

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

【讨论】：

确保如果您使用overflow: hidden，该元素没有明确设置高度（如height: 200px），这样做可能会向用户隐藏内容。

【解决方案5】：

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

【讨论】：