頁面佈局應用，將三個div如下圖排布。
這個會在顯示個人信息的時候展示，紅色的部分是頭像；黃色的部分是固定的信息；藍色的部分是可變的信息，且信息的長度不固定。
總體上看，紅色爲左側部分，黃色和藍色爲右側部分。
詳細的頁面代碼如下，顯示的是三個入上結構且添加 hover 樣式：
<head>
<style type="text/css">
.single{
/* 將父級別的浮動全部取消，這樣可以保證每個 single 是上下排布 */
clear: both;
padding-top: 10px;
cursor: pointer;
/* 這樣可以保證子 div 是包裹在父 div 裏面的，也就是 hover 的時候可以選中子 div */
overflow:hidden;
}
.single:hover {
background: #F1F1F1;
}
.left {
width: 100px;
height: 100px;
background: red;
float: left;
}
.right {
float: left;
}
.top {
height: 50px;
width: 50px;
background: yellow;
}
.down{
height: 80px;
width: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="single">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="down">
<div style="height: 30px; width: 50px; background: green;"> </div>
</div>
</div>
</div>
<div class="single">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
<div class="single">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</body>
因爲是指定了左側和右側的高度和長度，結構是乖乖的按照所想的排不了。在使用中同一個 single 中的左側和右側會因爲未指定寬度而出現左右側上下排布的狀況，可以指定左右兩側的寬度用 百分比，避免固定寬度，也可以達到這個效果。