Question

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

我有两列，使用float：left（和margin：0 padding：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

而不是使用浮点数：非常hacky /有跨浏览器问题（我相信），你应该考虑使用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;
    }

为什么css float会将子元素的填充添加到父元素？

1 个答案: