我正努力让第三排DIV正确对齐，即使浮点值设置为左前和右前一个DIV。我在这里附加了整个HTML和CSS文件，以便您可以轻松地重现问题并告诉我在哪里犯了错误。
<html>
<head>
<title>
Untitled Page
</title>
<link href="DefaultStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<form>
<div class="page">
<div class="main">
<div id="SomeHeading">
<div>
<span style="display:block">
<div>
<span><span class="bookName">Book Name : Beginning CSS</span><span class="bookDate">.</span>
<fieldset id="PersonalDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Personal Details</legend>
<span id="TitleLabel">Captn</span>
<span id="dot">. </span>
<span id="Full_NameLabel">David Beckham</span>
<br>
<div class="address">
<div class="Residential">
<h3>Residential Address</h3>
<span id="AddressLabel">1 Some Street</span>
<br>
<span id="SuburbLabel">Some State</span>
<span id="twoSpace"> </span>
<span id="StateLabel">XYZ</span>
<span id="twoSpace1"> </span>
<span id="PostcodeLabel">2324</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 3242 3435</span>
</div>
<div class="Organisational">
<h3>Organisational Address</h3>
<span id="Label2">1 Some Street</span>
<br>
<span id="Label3">Some State</span>
<span id="Label4"> </span>
<span id="Label5">XYZ</span>
<span id="Label6"> </span>
<span id="Label7">2324</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 3434 3533</span>
</div>
</div>
<span id="lblMobile" class="caption">Mobile</span>
<span id="M_PhoneLabel">0424 243 434</span>
<br>
<span id="lblEmail" class="caption">Email</span>
<span id="EmailLabel">Captain.Beck@gmail.com</span>
<br>
</fieldset>
<input type="image" name="ctl00$MainContent$ListView1$ctrl0$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
<br>
<fieldset id="PaymentDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Book and Payment Details</legend>
<span id="book_IDLabel">Beginning CSS</span>
<br>
<span id="lblbookFee" class="caption1">Order Amount</span>
<span id="book_FeeLabel">$273.00</span>
<br>
<span id="lblAvailingDiscount" class="caption1">Discount</span>
<span id="Label1">Yes</span>
<br>
<span id="lblCardType" class="caption1">Card Type</span>
<span id="Card_TypeLabel">VISA</span>
<br>
<span id="lblCardNumber" class="caption1">Card Number</span>
<span id="Card_NumberLabel">1243 4545 6457 5678</span>
<br>
<span id="lblExpiryDate" class="caption1">Expiry Date</span>
<span id="Expiry_Date">11 / 11</span>
<br>
<span id="lblCVC" class="caption1">Verification</span>
<span id="CVC">234</span>
<br>
<span id="lblNameOnCard" class="caption1">Name On Card</span>
<span id="Name_On_CardLabel">Captain Beck</span>
<br>
</fieldset>
<br>
</span>
</div>
<span style="display:block">
<div>
<span>
<span class="bookName">Book Name : Effective C++</span>
<span class="bookDate">.</span>
<fieldset id="PersonalDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Personal Details</legend>
<span id="TitleLabel">Miss</span>
<span id="dot">. </span>
<span id="Full_NameLabel">Shanahan Christie</span>
<br>
<div class="address">
<div class="Residential">
<h3>Residential Address</h3>
<span id="AddressLabel">KMS Oregon School</span>
<br>
<span id="SuburbLabel">Oregon</span>
<span id="twoSpace"> </span>
<span id="StateLabel">XYZ</span>
<span id="twoSpace1"> </span>
<span id="PostcodeLabel">2914</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 6241 7650</span>
</div>
<div class="Organisational">
<h3>Organisational Address</h3>
<span id="Label2">KMS Oregon School</span>
<br>
<span id="Label3">Oregon</span>
<span id="Label4"> </span>
<span id="Label5">XYZ</span>
<span id="Label6"> </span>
<span id="Label7">2914</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 6241 7650</span>
</div>
</div>
<span id="lblMobile" class="caption">Mobile</span>
<span id="M_PhoneLabel">1234 776 031</span>
<br>
<span id="lblEmail" class="caption">Email</span>
<span id="EmailLabel">Shanahan.Cristie@harrisonSchool.com</span>
<br>
</fieldset>
<input type="image" name="ctl00$MainContent$ListView1$ctrl2$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
<br>
<fieldset id="PaymentDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Book and Payment Details</legend>
<span id="book_IDLabel">Effective C++</span>
<br>
<span id="lblbookFee" class="caption1">Order Amount</span>
<span id="book_FeeLabel">$250.00</span>
<br>
<span id="lblAvailingDiscount" class="caption1">Discount</span>
<span id="Label1">No</span>
<br>
<span id="lblCardType" class="caption1">Card Type</span>
<span id="Card_TypeLabel">VISA</span>
<br>
<span id="lblCardNumber" class="caption1">Card Number</span>
<span id="Card_NumberLabel">1234 5678 9098 7654</span>
<br>
<span id="lblExpiryDate" class="caption1">Expiry Date</span>
<span id="Expiry_Date">11 / 11</span>
<br>
<span id="lblCVC" class="caption1">Verification</span>
<span id="CVC">123</span>
<br>
<span id="lblNameOnCard" class="caption1">Name On Card</span>
<span id="Name_On_CardLabel">Shanahan Christie</span>
<br>
</fieldset>
<br>
</span>
</div>
<span style="display:block">
<div>
<fieldset id="PersonalDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Personal Details</legend>
<span id="TitleLabel">Profe</span>
<span id="dot">. </span>
<span id="Full_NameLabel">Kallis K</span>
<br>
<div class="address">
<div class="Residential">
<h3>Residential Address</h3>
<span id="AddressLabel">36 Westmead Street</span>
<br>
<span id="SuburbLabel">Giralang</span>
<span id="twoSpace"> </span>
<span id="StateLabel">XYZ</span>
<span id="twoSpace1"> </span>
<span id="PostcodeLabel">2423</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="H_PhoneLabel">(02) 3232 3242</span>
</div>
<div class="Organisational">
<h3>Organisational Address</h3>
<span id="Label2">36 Westmead Street</span>
<br>
<span id="Label3">Giralang</span>
<span id="Label4"> </span>
<span id="Label5">XYZ</span>
<span id="Label6"> </span>
<span id="Label7">2423</span>
<br>
<span style="font-weight:bold;color:#b51032;">(Ph)</span><span id="W_PhoneLabel">(02) 3423 4232</span>
</div>
</div>
<span id="lblMobile" class="caption">Mobile</span>
<span id="M_PhoneLabel">0423 242 323</span>
<br>
<span id="lblEmail" class="caption">Email</span>
<span id="EmailLabel">Kalis@gmail.com</span>
<br>
</fieldset>
<input type="image" name="ctl00$MainContent$ListView1$ctrl4$ImageButton1" id="ImageButton1" class="button" src="Delete.png" onclick="return confirm('Are you sure you want to delete this entry?');" style="border-width:0px;">
<br>
<fieldset id="PaymentDetailsFieldSet">
<legend style="color: #fff; background: #ffa20c; border: 1px solid #781351; padding: 2px 6px;">
Book and Payment Details</legend>
<span id="book_IDLabel">Effective C++</span>
<br>
<span id="lblbookFee" class="caption1">Order Amount</span>
<span id="book_FeeLabel">$175.00</span>
<br>
<span id="lblAvailingDiscount" class="caption1">Discount</span>
<span id="Label1">Yes</span>
<br>
<span id="lblCardType" class="caption1">Card Type</span>
<span id="Card_TypeLabel">VISA</span>
<br>
<span id="lblCardNumber" class="caption1">Card Number</span>
<span id="Card_NumberLabel">2324 3232 4242 3442</span>
<br>
<span id="lblExpiryDate" class="caption1">Expiry Date</span>
<span id="Expiry_Date">11 / 11</span>
<br>
<span id="lblCVC" class="caption1">Verification</span>
<span id="CVC">232</span>
<br>
<span id="lblNameOnCard" class="caption1">Name On Card</span>
<span id="Name_On_CardLabel">Kallis K</span>
<br>
</fieldset>
<br>
</div>
</span>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</form>
</body>
</html>
CSS文件......
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
.page
{
width: 1200px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
.clear
{
clear: both;
}
/* Default Style.css*/
.caption
{
width:6em;
float:left;
margin-right:0.2em;
display:block;
font-weight:bold;
color:#b51032;
}
.caption1
{
width:9em;
float:left;
margin-right:0.2em;
display:block;
font-weight:bold;
color:#b51032;
}
.bookHeader
{
display:block;
background-color:#b51032;
color:white;
font-weight:bold;
font-size:large;
}
.bookDate
{
color:#b51032;
font-weight:bold;
font-size:large;
float:right;
background-color:#b51032;
width:15%;
text-align:right;
margin-left:-30px;
/*border:1px dotted yellow;*/
}
.bookName
{
color:white;
font-weight:bold;
font-size:large;
float:left;
background-color:#b51032;
width:85%;
}
.button
{
float:right;
margin-top:100px;
margin-left:20px;
}
#PersonalDetailsFieldSet
{
border: 1px solid #781351;
width: 30em;
float:left;
font-weight:bold;
}
.address{
margin-top: 5px;
width: 30em;
border:1px solid #781351;
}
.address .Residential{
display: inline-block;
/*vertical-align: top;*/
width: 14em;
/*border:1px solid #781351;*/
}
.address .Organisational{
width: 14em;
margin-right: 15px;
padding-left: 5px;
float: right;
display: inline-block;
/*vertical-align: top;*/
border-left:1px solid #781351;
}
#PaymentDetailsFieldSet
{
border: 1px solid #781351;
width: 30em;
float:right;
margin-right:10px;
margin-left:-20px;
font-weight:bold;
}
.page
{
width: 960px;
margin: 20px auto 0px auto;
}
答案 0 :(得分：1)
你需要清理你的花车。
具体来说，在每两个实例之后：
</fieldset>
添加：
<div style="clear: both;"></div>
答案 1 :(得分：1)
你需要clear行之间的浮动 - 这里：http://jsfiddle.net/YCZJ5/1/是一个修补的小提琴。
为了解释这种行为，让我们命名左浮动div和A，而右浮动div是C和D，所以你的结构如下：
AA CC
AA CC
BB DD
BB DD
由于每个元素的高度，结果如下：
AA CC
AA CC
AA BB DD
BB DD
在元素C之后添加清除会添加“换行符”。
答案 2 :(得分：1)
我认为你只需要一个“明确修复”，这只是一个小小的黑客，增加一个浮动... bla bla bla ...你不需要真正知道它是如何工作的，但谷歌它如果你想要充分了解。溢出：隐藏;也可以强制div扩展并包含它的东西，然而，它有一副副作用。
在你的样式表中添加这个“微清除修复”CSS：
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
然后将类.cf添加到不是“拉伸”或其他的div。在你的情况下，.address
<div class="address cf">
你也可以在css中切换cf并输入.address - 这取决于你如何处理css。我喜欢OOCSS方法。我为需要清除的重用事物提供了专门的修复，例如.container或者其他东西，然后偶尔会在特殊情况下输入.cf。
HERE是一个包含代码的jsfiddle。下一次，在jsfiddle中创建一个小小的用例，我们可以更快地缩小问题范围。
了解微清除修复HERE
你想在.address的底部也需要一些填充 - 我想 - 看看jsfiddle。
希望这有帮助。