br clear="all" vs css 解决方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7180264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
br clear="all" vs css solution
提问by Phillip Senn
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
我有一个浮动的 div：左，div 之后是页面的其余部分。为了将页面的其余部分保持在 div 下方，我必须首先放置一个
<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.
问：如何将页面的其余部分定位在浮动 div 下方？我认为我需要将页面的其余部分包装在一个新的 div 中并将其浮动。但我倾向于尽可能远离花车。
采纳答案by Guffa
On the next item you can use the style clear:left.
在下一个项目上，您可以使用 style clear:left。
Another alternative is to set the overflowstyle on the parent of the floating element to make it contain it, like overflow:hidden.
另一种选择是overflow在浮动元素的父元素上设置样式以使其包含它，例如overflow:hidden.
回答by shahalpk
after the div you've floated. add the following code.
在你漂浮的 div 之后。添加以下代码。
<div style='clear:both'></div>
then continue the rest of the page as usual.
然后像往常一样继续页面的其余部分。
回答by CookieMonster
I usually wrap another div around the floating div, with style overflow: auto
我通常在浮动 div 周围包裹另一个 div，样式 overflow: auto
回答by Alex
Create a class and insert into CSS:
创建一个类并插入到 CSS 中：
br.cb { clear: both; }
Insert into HTML:
插入到 HTML：
<br class="cb">
This made it past W3 markup and CSS validator.
这使它通过了 W3 标记和 CSS 验证器。
回答by Robbie McMullen
<!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>
