Br clear = "all" vs css solution

У меня есть div, который является float: left, а после div - остальная часть страницы. Чтобы оставить остальную страницу ниже div, я должен сначала разместить

<br clear="all">

Q: Как разместить оставшуюся часть страницы под плавающим div? Я думаю, что мне нужно обернуть остальную часть страницы в новом div и поплавать. Но я стараюсь держаться подальше от поплавков, насколько могу.

Ответы

Ответ 1

В следующем элементе вы можете использовать стиль clear:left.

Другой альтернативой является установка стиля overflow для родителя плавающего элемента, чтобы он содержал его, например overflow:hidden.

Ответ 2

после того, как вы разместили div. добавьте следующий код.

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

затем продолжите оставшуюся часть страницы, как обычно.

Ответ 3

Я обычно обертываю еще один div вокруг плавающего div, со стилем overflow: auto

Ответ 4

Создайте класс и вставьте в CSS:

br.cb { clear: both; }

Вставить в HTML:

<br class="cb">

Это сделало его прошлой разметкой W3 и валидатором CSS.

Ответ 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>

Ответ 6

Обратите внимание, что свойство clear: должно работать только с элементами уровня блока в CSS 2+. Вышеуказанное предложение, если оно работает, не рекомендуется.

Ссылка: https://www.w3.org/TR/CSS22/visuren.html#flow-control