br clear=“all” vs css solution

I have a div that is float:left, and after the div is the rest of the page. In order to keep the rest of the page below the div, I must first place a

<br clear="all">

Q: How do I position the rest of the page below the floated div? I think that I need to wrap the rest of the page in a new div and float it as well. But I tend to stay away from floats as much as I can.

标签： css

5条回答

干净又极端

2楼-- · 2020-03-12 01:59

after the div you've floated. add the following code.

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

then continue the rest of the page as usual.

0人赞添加讨论(0) 举报

▲ chillily

3楼-- · 2020-03-12 02:07

I usually wrap another div around the floating div, with style overflow: auto

0人赞添加讨论(0) 举报

姐就是有狂的资本

4楼-- · 2020-03-12 02:14

On the next item you can use the style clear:left.

Another alternative is to set the overflow style on the parent of the floating element to make it contain it, like overflow:hidden.

0人赞添加讨论(0) 举报

仙女界的扛把子

5楼-- · 2020-03-12 02:24

Create a class and insert into CSS:

br.cb { clear: both; }

Insert into HTML:

<br class="cb">

This made it past W3 markup and CSS validator.

0人赞添加讨论(0) 举报

甜甜的少女心

6楼-- · 2020-03-12 02:25

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

0人赞添加讨论(0) 举报

br clear=“all” vs css solution

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间