html - 清除 div 不起作用

Question

我正在努力以正确的方式清除 3 div 我可以通过在包装 div 的底部添加填充来做到这一点，但这确实不切实际。

Demo of the problem

您认为最好的治疗方法是什么？

HTML

<section class="audience">

<div class="container">

    <div class="audience_col1">

    <h1>title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>

    </div>

    <div class="audience_col2">

    <h1>title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>

    </div>

    <div class="audience_col3">

    <h1>title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>

    </div>

</div>    

</section>

CSS

.audience{
    width: 100%;
    background-color: #f6f5fa;
    height: auto;
    overflow:auto;
    text-align:center;
    padding: 20px 0 20px 0;
}

.audience_col1{
    width: 33.33%;
    height: 100px;
    float: left;
    box-sizing:border-box;
    padding: 20px;
}

.audience_col2{
    width: 33.33%;
    height: 100px;
    float: left;
    box-sizing:border-box;
    padding: 20px;  
}

.audience_col3{
    width: 33.33%;
    height: 100px;
    float: left;
    box-sizing:border-box;
    padding: 20px;  
}

Answer 1

如果我的想法是正确的，为什么不直接显示 div 元素呢？

Demo Fiddle

CSS

.audience {
    width: 100%;
    background-color: #f6f5fa;
    text-align:center;
    padding: 20px 0 20px 0;
    font-size:0; /* <--- trick to prevent inline 'spacing' of multiline HTML */
}
.audience_col1, .audience_col2, .audience_col3 {
    width: 33.33%;
    height: 100px;
    display:inline-block;
    box-sizing:border-box;
    padding: 20px;
    font-size:14px; /* <--- revert font-size */
}