Html div不能正确浮动

我只是想把这3个div浮动到左边，这样它们就都在一条线上了。但每当我将float left应用于id=abkitchen时，它就不会浮动。我想这是因为我在页面顶部有一个固定的标题。你知道如何让它们正确漂浮吗？提前谢谢

HTML:

---

首先，你有一个错误的餐具，食物，你需要浮动：左； 其次，需要将float属性设置为需要浮动的所有元素。 从简单开始，做三个浮动的div，然后从那里开始工作

接下来你会遇到的问题是-你的div向下移动。你需要为所有div设置宽度，然后将它们封装在一个更大的div中。在所有浮动div之后，我个人在其中放了一个空div，它只有一个清晰的：两者；在其中

注意：

<div style="width: 381px; border: 1px solid #000000;">
    <div style="float: left; width: 125px; border: 1px solid #FF0000;">
        I am RED!!!
    </div>
    <div style="float: left; width: 125px; border: 1px solid #00CC00;">
        I am Green!!!
    </div>
    <div style="float: left; width: 125px; border: 1px solid #0000FF;">
        I am Blue!!!
    </div>
    <div style="clear: both;"></div>
</div>
<div style="border: 1px solid #000000;">And my behaviour is completely unacceptable!</div>

---

通过这种方式，无论您如何调整窗口大小，都可以确保元素保持在原位…

我认为您应该添加clearfix

以下是HTML：

<div id="logo"><img src="images/logo.png"></div>

<div id="filters">

            <div class="section" id="utensils">
                <ul>
                    <li>HANDS<input type="checkbox" name="hands" value=".hands" id="hands"><label for="hands"></label></li>
                    <li>FORK<input type="checkbox" name="fork" value=".fork" id="fork"><label for="fork"></label></li>
                </ul>
            </div>

            <div class="section" id="food">
                <ul>
                    <li><input type="checkbox" name="burger" value=".burger" id="burger"><label for="burger">BURGER</label></li>
                    <li><input type="checkbox" name="cupcake" value=".cupcake" id="cupcake"><label for="fork">CUPCAKE</label></li>
                </ul>
            </div>
</div> 

<div id="abkitchen"><p><em>Kitchen Act</em> is an exploration presenting a series of videos that investigate the interaction people have with everyday utensils. By pairing everyday food with an unexpected utensil,  for instance, a burger with chopsticks, these interactions aim to foster an appreciation towards these tools that are often considered secondary to food. By establishing that utensils are the bridge between us and our food, these videos assert that utensils play a defining role in our experience of a meal.</p></div>
<div class="clearfix"></div>

---

我希望它能很好地工作。

当你说三个div时，尽量说得更具体些。。。 不管怎么说，我建议你先用最少的内容和一些基本的CSS来添加你的div。当这起作用时，开始添加内容和更多的CSS

HTML

---

请注意，float；left；无效。它应该是float:left；。我刚刚将float:left添加到过滤器和abkitchen。它可能是其他内容。您应该更正错误：键入float:left；而不是float；left；很抱歉。我指的是徽标、abkitchen和过滤器。但我已经让它工作起来了。谢谢您的反馈，请注意

<div style="width: 381px; border: 1px solid #000000;">
    <div style="float: left; width: 125px; border: 1px solid #FF0000;">
        I am RED!!!
    </div>
    <div style="float: left; width: 125px; border: 1px solid #00CC00;">
        I am Green!!!
    </div>
    <div style="float: left; width: 125px; border: 1px solid #0000FF;">
        I am Blue!!!
    </div>
    <div style="clear: both;"></div>
</div>
<div style="border: 1px solid #000000;">And my behaviour is completely unacceptable!</div>

<div id="logo"><img src="images/logo.png"></div>

<div id="filters">

            <div class="section" id="utensils">
                <ul>
                    <li>HANDS<input type="checkbox" name="hands" value=".hands" id="hands"><label for="hands"></label></li>
                    <li>FORK<input type="checkbox" name="fork" value=".fork" id="fork"><label for="fork"></label></li>
                </ul>
            </div>

            <div class="section" id="food">
                <ul>
                    <li><input type="checkbox" name="burger" value=".burger" id="burger"><label for="burger">BURGER</label></li>
                    <li><input type="checkbox" name="cupcake" value=".cupcake" id="cupcake"><label for="fork">CUPCAKE</label></li>
                </ul>
            </div>
</div> 

<div id="abkitchen"><p><em>Kitchen Act</em> is an exploration presenting a series of videos that investigate the interaction people have with everyday utensils. By pairing everyday food with an unexpected utensil,  for instance, a burger with chopsticks, these interactions aim to foster an appreciation towards these tools that are often considered secondary to food. By establishing that utensils are the bridge between us and our food, these videos assert that utensils play a defining role in our experience of a meal.</p></div>
<div class="clearfix"></div>

#logo{
    float:left;
    padding:15px;

}

#abkitchen{
    background-color: #E0E0E0;
    padding:15px;
    text-align: left;
    width:50%;
}

#filters{
    text-align: left;
    padding:15px;

    /*background-color: white;*/
}

#utensils, #food{
    display: inline-block;
    float;left;
    width:auto;
    height:auto;
    background-color: yellow;
}

#utensils{
    text-align: right;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
}

#food{
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    margin-left: -5px;
}

li{
    list-style-type: none;
}
.clearfix{
    clear: both;
}

<div id="logo">
  <p>this is logo</p>
</div>

<div id="filters">
  <p>this is filters</p>    
</div> 

<div id="abkitchen">
  <p>this is abkitchen</p>
</div>

#logo,
#filters,
#abkitchen {
  float: left;
  padding: 20px;
  border: 1px solid #eee;
}