我试图遵循 thenewboston 视频中显示的网站设计的盒模型风格，但是当我应用 float 元素并刷新时，我的网站显示为空白。
这是我的 CSS 和 HTML 的片段。
CSS
* {
margin: 0px;
padding: 0px;
}
h2 {
font: bold 23px "Times New Roman";
color: black;
}
h3 {
font: italic 16px "Times New Roman";
}
header, section, footer, aside, nav, article, hgroup {
display: block;
}
body {
text-align: center;
}
#page_wrapper {
width: 1000px;
margin: 20px auto;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
font-family: "Times New Roman";
font-size: 23px;
padding: 10px;
font-decoration: italic;
color: white;
background: #454545;
}
#top_menu {
background: #454545;
color: white;
padding: 3px;
border: 1px solid black;
font: italic 20px Georgia;
}
#top_menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: italic 14px "Times New Roman";
color: white;
}
#new_div {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#page_section {
float: left;
width: 660px;
margin: 30px;
border: 1px solid black;
font: 15px "Times New Roman";
}
#page_aside {
float: left;
width: 220px;
margin: 20px 0px;
padding: 30px;
border: 1px solid black;
background: #DCE1E3;
text-align: center;
font: 15px "Times New Roman";
}
HTML
<head>
<meta charset="utf-8" />
<title>A Website</title>
<link href="styles1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page_wrapper">
<header id="top_header">
<h1>A Website</h1>
</header>
<nav id="top_menu">
<ul style="list-style-type:none">
<li><a href="http://www.google.com">Home</a></li>
<li><a href="http://www.google.com">About</a></li>
<li><a href="http://www.google.com">Portfolio</a></li>
<li><a href="http://www.google.com">Contact</a></li>
</ul>
</nav>
<div id="new_div">
<section id="page_section">
<article>
<header>
<hgroup>
<h2>I am an H2 Article Title</h2>
<h3>I am an H3 Article Subtitle</h3>
</hgroup>
</header><br><br>
<p>Hi I'm a paragraph. La La La !</p> <br><br>
</p>
</article>
</section>
<aside id="page_aside">
<h4>Updates for the Website</h4><hr><br>
<p>- I'm an Update</p><br>
<p>- So Am I!</p>
</aside></div><br>
</div>
</body>
</html>
最佳答案
Will 指的是 clearfix: both; CSS 规则，这意味着具有此规则的任何元素都将“清除”任何先前具有 float 的元素。
尝试在主要 block 之间添加以下 div 元素，您应该开始得到不同的结果。您当然可以申请 clearfix规则主要元素 block 本身，但这是一个非常基本的示例。
.clearfix {
float: left;
clear: both;
width: 100%;
}
然后是在主要 block 之间使用的元素，甚至是容器中的最后一个子元素:
<div class="clearfix"></div>
有关什么是 clearfix 的更详细的答案，请参阅 this question .
关于应用了 CSS Float 但文本根本不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40053562/