我們常常會看到一些網頁永遠都是充滿屏幕的，不會出現水平方向的滾動條，那這些靈活的頁面佈局是怎樣做到的呢？而有些出現水平方向的滾動條的頁面又是因爲什麼原因呢？
例：
1.出現水平方向滾動條的頁面及代碼：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:100%;background:black;border:5px solid red;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
這是一個橫向兩列布局的頁面，從圖中我們可以看到當子元素box1和box2運用了浮動而其父元素box沒有設置浮動時，子元素會把父元素給覆蓋掉，這是因爲什麼呢？這是因爲父元素沒有設置浮動，而兩個子元素的寬度加起來之後大於父元素，導致父元素的高度無法撐開，子元素內容溢出。ok，我們現在對父元素進行清除浮動看看（注意這時水平方向的滾動條已經出現）：
2.清除浮動之後的頁面及代碼：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:100%;background:black;border:5px solid red;overflow:hidden;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
我們看到清除浮動之後，父元素得以重現，但是這時水平方向上的滾動條仍然存在，注意我們再來看沒有滾動條時是什麼樣的情況：
3.沒有水平滾動條的頁面及代碼：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:90%;background:black;border:5px solid red;overflow:hidden;}
.box1{width:700px;height:200px;background:green;float:left;}
.box2{width:150px;height:500px;background:blue;float:right;}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果如下：
通過對比2和3我們可以發現，當父元素的寬度width=100%時，頁面就會出現水平方向上的滾動條，這是爲什麼呢？要弄清楚這個問題，我們首先要知道這個width=100%的基準是誰，也就是說它是相對於誰而言的?它的參照物是誰？根據CSS的相關知識我們知道，當子元素沒有設置樣式時，子元素會繼承其父元素的樣式，而在本例當中，父元素box的父元素又是誰呢？答案是標籤<html>，或者也可以理解爲當前瀏覽器的可視窗口，所以它的寬度是整個瀏覽器窗口的寬度，而瀏覽器具有放大縮小的功能，所以它就會把子元素的寬度設置爲當前可見區域的寬度，所以就會出現滾動條的情況，當滑動滾動條時，子元素的內容就會隨着瀏覽器窗口的可視寬度進行顯示，所以如果不想出現滾動條的情況，那麼就需要在設置width值時，一定要設置一個不爲100%的值。（如果需要用滾動條來顯示溢出的話，那麼可以把overflow設置爲auto或者scroll）