HTML浮动属性并排
问题描述：
我正在学习HTML和CSS，并且我生成了有关float属性的此代码。HTML浮动属性并排
\t
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Using Float to Place Elements Side-by-Side</title>
\t </head>
\t <body>
\t \t <h1>The Evolution of the Bicycle</h1>
\t \t <p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
\t \t <p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
\t \t <p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
\t \t <p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
\t \t <p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
\t \t <p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
\t </body>
</html>现在，我的问题是这样的 -
为什么第四段id="four"下第三段id="three"而不是移动到左侧边缘来了吗？
答
float: left;将使用可用空间的每一位来确保没有空间被浪费。你可以在你的例子中看到这个。第三列有下面的空闲空间，所以第四列放置在那里。
我认为你正在寻找display: inline-block;与vetical-align: top;而不是float: left;为好的结果。看下面的例子。
\t \t \t body {
\t \t \t \t width: 750px;
\t \t \t \t font-family: Arial, Verdana, sans-serif;
\t \t \t \t color: #665544;
\t \t \t }
\t \t \t p {
\t \t \t \t width: 230px;
\t \t \t \t margin: 5px;
\t \t \t \t padding: 5px;
\t \t \t \t background-color: #efefef;
\t \t \t \t display: inline-block;
\t \t \t \t vertical-align: top;
\t \t \t }<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Using Float to Place Elements Side-by-Side</title>
\t </head>
\t <body>
\t \t <h1>The Evolution of the Bicycle</h1>
\t \t <p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
\t \t <p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
\t \t <p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
\t \t <p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
\t \t <p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
\t \t <p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
\t </body>
</html>
答
那是因为你没有指定clear属性。来自MDN：
清除CSS属性指定一个元素是否可以在它之前的浮动元素旁边，或者必须在它们下面向下移动（清除）。
\t
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
#four {
clear: left;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Using Float to Place Elements Side-by-Side</title>
\t </head>
\t <body>
\t \t <h1>The Evolution of the Bicycle</h1>
\t \t <p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
\t \t <p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
\t \t <p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
\t \t <p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
\t \t <p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
\t \t <p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
\t </body>
</html>
因为他们是 “浮动” 和第4单元有足够的空间，以左浮动... – Dekel