Html ul不在div容器内

为什么我的容器不是背景色红色，而ul不在div容器内

风格：

#container {
            width:1000px
            }

#categoryorder {
            float:left;
            width:500px;
            margin:0 0 0 50px;
            display:inline;
            list-style-type:none
}

#categoryorder li {
            color:#003366;
            font-size:20px;
            float:left;
            width:196px;
            background-color:#fcfcfc;
            border: 2px solid #dddddd;
            margin:0 50px 50px 0;
            line-height:50px;
            text-align:center;
            display:inline;
            cursor:move
}

<div id="container" style="background-color: red;">
     <ul id="categoryorder">
         <li id="ID_1">1</li>
         <li id="ID_2">2</li>
         <li id="ID_3">3</li>
         <li id="ID_4">4</li>
         <li id="ID_5">5</li>
         <li id="ID_6">6</li>
         <li id="ID_7">7</li>
         <li id="ID_8">8</li>
     </ul>
</div>

HTML:

#container {
            width:1000px
            }

#categoryorder {
            float:left;
            width:500px;
            margin:0 0 0 50px;
            display:inline;
            list-style-type:none
}

#categoryorder li {
            color:#003366;
            font-size:20px;
            float:left;
            width:196px;
            background-color:#fcfcfc;
            border: 2px solid #dddddd;
            margin:0 50px 50px 0;
            line-height:50px;
            text-align:center;
            display:inline;
            cursor:move
}

<div id="container" style="background-color: red;">
     <ul id="categoryorder">
         <li id="ID_1">1</li>
         <li id="ID_2">2</li>
         <li id="ID_3">3</li>
         <li id="ID_4">4</li>
         <li id="ID_5">5</li>
         <li id="ID_6">6</li>
         <li id="ID_7">7</li>
         <li id="ID_8">8</li>
     </ul>
</div>

1
2
3
4
5
6
7
8

因为您在其中浮动所有元素，而不清除它们。创建一个clear类，然后在底部添加一个元素：

HTML

<div id="container" style="background-color: red;">
     <ul id="categoryorder">
         <li id="ID_1">1</li>
         <li id="ID_2">2</li>
         <li id="ID_3">3</li>
         <li id="ID_4">4</li>
         <li id="ID_5">5</li>
         <li id="ID_6">6</li>
         <li id="ID_7">7</li>
         <li id="ID_8">8</li>
     </ul>
    <div class="clr"></div>
</div>

---

浮动子元素时，实际上是将它们从文档流中移除，容器元素的高度收缩为零。添加

溢出：自动

到您的

#容器

div以恢复您寻求的行为

#container {
    width:1000px;
    overflow:auto;
}

---

请注意，此答案不需要任何额外的（非语义）div来获得所需的结果。

将

float:left

更改为

display:inline block

Css:

您正在浮动元素，需要将
溢出：隐藏
添加到父容器以恢复高度。使用此选项，您将不需要向流中添加额外的div

#container {
            width:1000px; overflow: hidden;
            }

只需使用display:inline块即可（并添加垂直对齐：top以获得更好的外观）

Float是为从flow中切割块而设计的，所以这是正常的行为：内部没有浮动块，所以flow几乎是零

内联块在流中，所以它可以工作

对于内联块只有一个技巧：记住空格！如果它们在源代码中，那么块中的边距会很小，所以只需注释缩进即可

某件事另一件事
（查阅资料来源）

这是正确的答案-但是您应该使用本文中定义的clearfix技术，因为仅仅为了清除浮动而添加空的
div
元素是一种不好的做法。@ninty9notout-为什么这是正确的答案？额外的div是完全不必要的。@j08691在过去的好日子里，在伪元素出现之前，您就是这样做clearfix的，因此这是一个有效的答案。我还提到过，这是一种不好的做法，它会处理不必要的争论，并提供一个指向资源的链接，该资源提供了在现代浏览器中实现clearfix的方法。@ninty9notout-当然，我不会对此提出异议，但正如您指出的，这是一种旧的做法，需要额外的，非语义标记。最后我明白了为什么我的浮动内容使包含的DIV收缩…：-）但是使用溢出：隐藏还是自动之间有什么区别？根据@j08691 answer，它还与auto一起工作。在这种情况下，它们的行为相似，只需清除浮动，溢出隐藏将隐藏额外内容，但只有在设置了固定高度的情况下