我不明白为什么我的两个 div 容器 mainContainer 和 sideContainer 不会彼此相邻 float ，当您取消注释 float 时，在 .container 类中它们完全相邻但它下面的一切都乱七八糟我试图解决这个问题通过制作一个占据页面整个宽度的父容器，这样它就可以容纳整行。请帮忙。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
header {
background-color: orange;
height: 180px;
}
#pageContent {
background-color: orange;
height: 100%;
}
/* Navigation */
nav {
background-color: gray;
height: 40px;
}
/* End of Navigation */
/* Welcome Section */
#welcomeSection {
background-color: dodgerblue;
height: 200px;
width: 100%;
}
/* End of Welcome Section */
/* Script Section */
#scriptSection {
height: 100%;
}
.container {
//float: left;
overflow: hidden;
min-height: 300px;
}
#mainContainer {
width: 70%;
background-color: red;
}
#sideContainer {
width: 30%;
background-color: green;
}
/* End of Script Section */
/* Notes Section */
#notesSection {
background-color: dodgerblue;
height: 200px;
width: 100%;
}
/* End of Notes Section */
/* Footer */
footer {
background-color: orange;
height: 180px;
}
/* End of Footer */<!doctype html>
<html>
<title></title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
<body>
<header>
<p>Header</p>
</header>
<nav>
<p>Nav</p>
</nav>
<section id="pageContent">
<div id="welcomeSection">
<p>Welcome</p>
</div>
<div id="scriptSection">
<div id="mainContainer" class="container">
<p>Main Container</p>
</div>
<div id="sideContainer" class="container">
<p>Side Container</p>
</div>
</div>
<div id="notesSection">
<p>Notes</p>
</div>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>最佳答案
尝试将 clear:both 添加到 #notesSection
#notesSection {
clear: both;
background-color: dodgerblue;
height: 200px;
width: 100%;
}
或者在#scriptSection和#notesSection之间添加一个div，然后给它一个clear:both的样式>
<div id="scriptSection">
<div id="mainContainer" class="container">
<p>Main Container</p>
</div>
<div id="sideContainer" class="container">
<p>Side Container</p>
</div>
</div>
<div style="clear:both"></div>
<div id="notesSection">
<p>Notes</p>
</div>
关于html - 当容器漂浮时下面的一切都乱七八糟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42548254/