爲什麼css float會將子元素的填充添加到父元素？

Question

我在編寫網站時遇到了一個我無法理解的問題。

我有兩列，使用浮動：左（和保證金：0填充：0） 裏面的列是塊

當塊是空的有沒有問題，我甚至可以將文本添加到它，而無需使用<p>標籤。 但是，當我在塊中添加<p>標記時，父項列會添加一些填充。

當我不使用float:left（所以只有一列），但我可以使用塊內的<p>標記沒有填充添加到父元素。

當然，我可以想出一些解決辦法，但我也想明白爲什麼會發生這種情況，如果有人知道如何恢復事情的奇怪行爲。

我有一個活的問題演示here。

<style> 
#html, body{ 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     font-size: 100%; 
} 

#pagewrap { 
     padding: 0 20px; 
     width: 960px; 
     height: 100%; 
     margin: 0 auto; 
     background: #CCC; 
} 

.test { 
     width: 100%; 
    height: 100px; 
     margin: 0; 
     padding: 0; 
     background: #00F; 
     clear: both; 
} 

.column { 
     width: 480px; 
     margin: 0; 
     padding: 0; 
     float: left; 
     background: #0F0; 
} 

.column2 { 
     width: 480px; 
     margin: 0; 
     padding: 0; 
     background: #0F0; 
} 

.lefty { 
    min-height: 100px; 
     width: 470px; 
     margin: 0 10px 10px 0; 
     padding: 0; 
     background: #999; 
} 

.righty { 
     min-height: 130px; 
     width: 470px; 
     margin: 0 0 10px 10px; 
     padding: 0; 
     background: #999; 
} 

</style> 

<div id="pagewrap"> 

    <div class="test"></div> 

    <div class="column"> 

     <div class="lefty"> 
     <p></p> 
     </div> 

     <div class="lefty"> 
      <p></p> 
     </div> 

    </div> 

    <div class="column">  

     <div class="righty"> 

     </div> 

     <div class="righty"> 

     </div> 

    </div> 

    <div class="test"></div> 

<div class="column2"> 

     <div class="lefty"> 

     </div> 

     <div class="lefty"> 

     </div> 

    </div> 

    <div class="test"></div> 

<div class="column2"> 

     <div class="lefty"> 
     <p></p> 
     </div> 

     <div class="lefty"> 
     <p></p> 
     </div> 

    </div> 

    <div class="test"></div> 

</div> 

Answer 1

而不是使用花車：這是相當哈克/具有跨瀏覽器的問題（我相信），你應該考慮inline-block的

即造型的元素，元素你想擁有在一排：

#wrap { 
width:100%; 
} 

#main_container { 
    margin:0 auto; 
    width:1000px; 
} 

#column { 
    display:inline-block; 
    *display:inline;zoom:1; //ie7 hack, does not affect other browsers 
    width:200px; height:200px; background:#aaa; 
} 

#content { 
    display:inline-block; 
    *display:inline;zoom:1; 
    width:600px; height:600px; background:red; 
} 

HTML

<div id="wrap"> 
    <div id="main_container"> 
     <div id="column">list of items</div> 
     <div id="content">paragraph content</div> 
    </div> 

</div> 

，不要忘記把一個CSS資源在等你的CSS文件的BEGINNING

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 
fieldset,img { 
    border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
    font-style:normal; 
    font-weight:normal; 
} 
ol,ul { 
    list-style:none; 
} 
caption,th { 
    text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
    font-size:100%; 
    font-weight:normal; 
} 
q:before,q:after { 
    content:''; 
} 
abbr,acronym { border:0; 
    }