Question

我正在一个单页网站上工作。我有一个名为.INsobre的div和它的父包装器.sobre

我所拥有的内容有两列，一列是左侧，另一列是右侧但是它们没有填满.INsobre div。

正如您在此打印中看到的那样，蓝色轮廓是.INsobre div。 enter image description here

为什么会这样？我该如何解决？

我的HTML

<div class="sobre">
    <div class="INsobre">
        <div class="sobreLeft">
            <img src="img/sobre/empresa.png">
        </div>
        <div class="sobreRight">
            <h2>SOBRE NÓS</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius ipsum eget augue aliquam pulvinar. Duis cursus vulputate odio ac elementum. In posuere lorem vel erat mollis, eleifend feugiat augue porttitor. Donec eu tristique sem. Nullam tincidunt vel felis quis vehicula. Fusce a sagittis purus, ac pellentesque lectus.
            </p>
            <p>
                Phasellus cursus cursus risus, id malesuada ex varius ut. Mauris volutpat erat purus, sed egestas ex semper porttitor. Vivamus sit amet hendrerit purus, eu interdum mauris. Quisque nec eleifend turpis, vulputate placerat ligula. Suspendisse blandit ipsum in efficitur varius. Aliquam a odio id lorem placerat ultrices eget ac leo. Integer non vulputate lacus. Sed tincidunt vehicula semper. Mauris ac nulla non mauris egestas sollicitudin.
            </p>
            <a href="#" class="solicitar_visita"><span>SOLICITE A NOSSA VISITA</span></a>
        </div>
    </div>
</div>

和我的css

/* SOBRE NÓS */
.sobre{
    width: 100%;
    clear: both;
}
.INsobre{
    width: 1200px;
    padding: 80px 10px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.sobreLeft{
    width: 40%;
    float: left;
    text-align: center;
}
.sobreLeft img{
    border-radius: 100%;
    border: 6px solid #59B200;
    padding: 4px;
    margin: 50px 0 0 0;
}
.sobreRight{
    width: 60%;
    float: right;
    padding: 0 30px 0 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.sobreRight h2{
    margin: 0 0 45px 20px;
    padding: 0;
    font-size: 28px;
    font-weight: 300;
    color: #FF8000;
}
.sobreRight p{
    margin: 0 0 40px 0;
    padding: 0 0 0 20px;
    font-weight: 300;
    font-size: 14px;
    text-align: justify;
    line-height: 19px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border-left: 3px solid #59B200;
}

.sobreRight .solicitar_visita{
    padding: 10px;
    background: #fff;
    border: 2px solid #59B200;
    color: #59B200;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: color 0.2s linear, background 0.2s linear;
       -moz-transition: color 0.2s linear, background 0.2s linear;
         -o-transition: color 0.2s linear, background 0.2s linear;
            transition: color 0.2s linear, background 0.2s linear;
}
.sobreRight .solicitar_visita:hover{
    color: #fff;
    background: #59B200;
}

Answer 1

<div style="clear: both;"></div>

或

.clear { clear:both; height:0; margin:0; font-size: 1px; line-height: 0; }

Read More.

替代 ly，display:inline-block

Answer 2

如果父元素只包含浮动元素，那么它的高度就会崩溃为空。

你仍然看到突出显示的蓝线有一定高度的原因是因为你设置了这个规则.INsobre{padding: 80px 10px;}，没有它它实际上会崩溃到没有。

要修复它，有几种方法，例如着名的 micro clearfix ：

.INsobre:after {
    content: "";
    display: table;
    clear: both;
}

或者，使用overflow:auto或overflow:hidden。请注意，如果您希望将来能够开箱即用，那么设置它将无法正常工作。即元素在容器内设置为position:absolute; right:-50px;。

.INsobre {
    overflow: auto;
}

更新了演示： http://jsfiddle.net/mcrwe9ym/

Answer 3

只需将overflow:auto添加到.INsobre：

.INsobre{
    width: 1200px;
    padding: 80px 10px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    overflow:auto;
}

浮动子元素允许父级折叠，就好像它们不存在一样。添加溢出规则可以恢复您所追求的行为。

奇怪的内容行为，不会填充其父级

3 个答案: