如何使用CSS使div块不浮动？

Layout.cshtml

<section id="main">
        <div id="sidebar">
            @{Html.RenderAction("CategoryMenu", "Store");}
        </div>
        <div id="content">
            @RenderBody()
        </div>
    </section>

---

我尝试将边栏的高度设置为100%，然后继承。我应该怎么做才能使两个块不彼此浮动？

侧边栏是向左浮动的，因此它将从DOM流中取出并设置到左侧。如果您不希望“内容”显示在其旁边，则需要在“内容”样式中添加“清晰：两者”。这将迫使它清除周围的所有浮动，并显示在下一行。但是，它不会阻止#侧边栏浮动，侧边栏旁边也不会有任何内容

---

你能解释一下你想做什么吗？因为你特别将侧边栏设置为浮动：左，然后询问如何使它们不浮动。

正在寻找

位置

？将

位置

设置为

绝对

或

固定

，它将不再浮动。如何将两个块并排放置而不像这样浮动[sidebar][content]将它们都设置为显示：内联块；垂直对齐：topI添加了内联块；垂直对齐：从顶部到#侧边栏和#内容。但是它把内容放在“新行”上，就像这样：侧边栏，然后在下一行内容中。通常，当出现这种情况时，因为它们的宽度（可能还有边距和填充）都比父行宽，所以下一行要收尾，就像句子中的单词收尾一样。有两种方法可以解决这个问题：1。减小宽度，直到适合2。将父项设置为空白：nowrap。nowrap将强制它将它们保持在一起，但由于宽度的原因，它可能会导致水平滚动条。空白：nowrap影响到子div。关于宽度：如何使两个div的宽度比例为：父宽度的15/85

...
    #main {
        padding: 30px 30px 15px 30px;
        background-color: #fff;
        -webkit-border-radius: 4px 0 0 0;
        -moz-border-radius: 4px 0 0 0;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }

    #sidebar {
        display: block !important;
        width: 15%;
        float: left;
        font: bold 20px arial, verdana;
        background: green;
        height: inherit !important;
    }

    #content {
        display: block !important;
        float:none;
    }
...