html - 清除 float div(清除 :both; not working )

Question

我有一个网站，我正在通过学​​校参加比赛，但我在清除 float 元素方面遇到了问题。

该网站托管在 http://www.serbinprinting.com/corey/development/

我所指的区域是页面底部的成分列表。我希望它所包含的 div 根据框中的内容调整其高度，但是我将不得不使用当前 float 的列，因此内容不会位于 div 的流中。

我曾尝试将一个 :after 元素与 clear:both 和 display: 块添加到列表以及它包含的 div 中，但没有成功。可以实现不 float 的两列布局吗？是否有我对清除做不正确的事情？

这是围绕这个问题的代码......

HTML

<section id="monthly_recipe">
    <div class="content_container">
        <div class="centered">
            <img src="images/icons/bread41.png">
            <h1>Gluten-Free Bread That Doesn't Suck</h1>
        </div>
        <div class="col-1">
            <ul><a href="http://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.htmlhttp://www.onegoodthingbyjillee.com/2013/03/finally-gluten-free-bread-that-doesnt-suck.html"></a>
                <li>4 cups Brown Rice Flour Blend   </li>
                <li>1 tablespoon xanthan gum</li>
                <li>1 tablespoon gluten-free egg replacer</li>
                <li>2 teaspoons salt</li>
                <li>½ cup powdered milk</li>
                <li>3 large eggs at room temperature</li>
                <li>¼ cup butter at room temperature</li>
                <li>2 teaspoons cider vinegar</li>
                <li>? cup honey</li>
                <li>1 package (2¼ teaspoons) active dry yeast (not INSTANT dry yeast)</li>
                <li>2 cups warm water</li>
            </ul>
        </div>
        <div class="col-2">
        </div>
    </div>
</section>  

CSS

#welcome { 
    position: relative;
    width: 100%; min-height: 500px;
    background:url(../images/welcome.jpg); 
    background-size: cover; 
}

#welcome h1 {
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 4em;
    font-weight: lighter;
    font-family: 'Bitter', serif;
    text-transform: uppercase;
    margin: 60px 0 10px 0;
    padding: 5px 10px 5px 10px; 
}

#monthly_recipe {
    position: relative; left: 0;
    width: 100%; height: 500px;
    background: #fff; 
}

#monthly_recipe h1 {
    font-size: 4em; 
}

#monthly_recipe ul li {
    list-style: none;
    font-size: 1.5em;
    color: #333; 
}

Answer 1

误读了问题，我编辑了我的答案

删除固定高度并向您的 #monthly_recipe 添加 :after 伪类使用这些规则:

#monthly_recipe:after {
    content: "";
    display: block;
    clear: both;
}