为什么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; 
    }