清除浮动 div（clear:both；不起作用）

Question

我有一个网站，我正在为学校的比赛而工作，但我遇到了清除浮动元素的问题。

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

我指的是页面底部的成分列表。我希望它包含的 div 根据框中的内容调整其高度，但是我将不得不使用当前浮动的列，因此内容不在 [= 的流中35=].

我已经尝试添加一个带有 clear:both 的 :after 元素并显示：块到列表以及它包含的 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 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

问题看错了，我修改了答案

删除固定高度并使用以下规则将 :after pseudo class 添加到您的 #monthly_recipe：

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

Answer 2

您似乎通过给#monthly_recipe div 500px 的固定高度来限制它显示完整列表，

试试这个：

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

Answer 3

我引用了你的网站。对不起，有很多错误你必须彻底参考 html 基础知识及其 classes 并使用 css 重置来快速和正确地完成它。

无论如何使用：

col-1 { 向左飘浮 } col-2 { 向左飘浮 }

并参考 clearfix。

对 col-1 和 col-2 父级与另一个 class 使用 clearfix [不在内容容器中]。

清除浮动 div（clear:both；不起作用）

Clearing floating divs ( clear:both; not working )

html

css

css-float