小编Cor*_* B.的帖子

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

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

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

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

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

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 …