我正在设计一个使用HTML和CSS的网站，似乎有一个无形的空白。
目前，我的网站如下：
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
display: inline-block;
vertical-align: top;
}
article {
width: 60%;
}
aside {
width: 30%;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>如果你仔细观察屏幕截图中间的
article和aside，你会发现我已经创建了它们的display: inline-block;，并从aside左侧移除了边框（较小的一个）。问题
问题是我想把
aside实际“钉”在身体的右边，而不是文章的右边。我知道要完成这项工作，我必须把右边的边界去掉，再把左边的边界加上。我试过的
使用各种对齐、文本对齐和所有其他可以想到的对齐值。
使
aside和article之间没有标记。请注意，我已经看到了其他解决方案，但我想要一个干净的解决方案，有意义。
最佳答案
我想这就是你想达到的目标。article和aside现在左右浮动。
这实际上是库库兹在评论中提出的解决方案。我不知道为什么这对你不起作用。
使用clearfix而不是带有clear: both的附加元素
如果没有周围的元素，在本例中，body无法从其内容获取高度，并且所有内容周围的边框将无法正确显示。
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
body:after {
content: '';
clear: both;
display: table;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
}
article {
width: 60%;
float: left;
}
aside {
width: 30%;
border-left: 5px solid #375E97;
border-right: 0;
float: right;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>关于html - 向右 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39632566/