html - 为什么css float会从子元素到父元素添加padding？

Question

我在编写网站代码时遇到了无法理解的问题/事情。

我有两列，使用 float: left (和 margin: 0 , padding: 0 )列内是 block

当 block 为空时没有问题，我什至可以在不使用 <p> 的情况下向其中添加文本。标签。但是当我添加 <p>父列 block 中的标签添加了一些填充。

当我不使用 float:left 时(所以只有一栏)但是我可以使用 <p> block 内的标记没有添加到父元素的填充。

当然我可以想出某种修复方法，但我也想了解为什么会发生这种情况，如果有人知道如何恢复这种奇怪的行为。

我有一个正在运行的实时问题演示 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

而不是使用 float :这是非常 hacky/有跨浏览器问题(我相信)，你应该考虑用内联 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 文件的BEGINNING处放置 CSS 重置

    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;
    }