<html>
<head>
<title></title>
<style type="text/css">
#father
{
border: solid 1px #0f0;
}
#father div
{
background-color: #eeb0b0;
padding: 25px;
border: dashed 3px #000;
}
div.special
{
float: left;
}
</style>
</head>
<body>
<div id="father">
<div class="special">
This is a devision!</div>
<div class="special">
This is a devision!</div>
<div style="padding-left: 500px;">
This is a devision!</div>
<div>
This is a devision!</div>
<p>
This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph!
This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph!
This is a paragraph! This is a paragraph!
</p>
</div>
</body>
</html>
實驗一:為什麼每設定一個Div的浮動,都會加一段紅色框的距離?
猛然很雷的很發現,原來這個鬼東西在設定成Float以後,設定Float的這個Div實際上會保留padding的設定,而跟在它屁股後面的Div則搶點floatDiv的這一行,由於Padding-left的距離小於float Div的寬長,預設就緊貼著FloatDiv的長度後面了,很無法這個
實驗二:為了證明上一個想法,看這個圖,前兩個Float的Div都保留著自己的padding,由於第三個div它搶佔了這一行,而自己的左padding又不夠大,只能緊挨著第二個Div
實驗三:在第三個Div中加入padding-left:500;後,第三個Div就隔出來了
總結:就這樣了.
