CSS：在表单或主要内容上设置样式不起作用（但在内部）

Question

我是 CSS 新手，希望有人可以帮助我。

我有一个 HTML 页面，其中包含一个具有以下结构的 HTML 表单。

到目前为止一切正常，但由于某种原因我无法将某些样式应用于“主要”部分或表单，尤其是。边框或背景颜色样式。

我尝试将以下一些内容添加到部分和表单中，并且都使用 ID 和类，但没有效果 - 即使我添加了 !important：

• border: 1px solid #000;
• background-color: #ccc;

我唯一能在上面设置的是一个有效的边距。

但是，如果我为内部 div 设置边框或背景样式（例如，对于“frmLine”类），它工作得很好，所以我的猜测是，由于某种原因，内部样式与应用于育儿表单和部分的任何样式重叠.

谁能告诉我如何解决这个问题？ 原因可能是育儿部分/表单和内部 div 之间没有边距或填充？

我的 HTML：

<div class="wrapper">
    <?php require_once("includes/menu.php"); ?>
    <section id="main">
        <form id="frmRequest">
            <div class="col-12">
                <span class="frmTitle">Some title</span>
            </div>
            <div class="col-12 frmLine">
                <div class="col-3 frmCaption">Some caption</div>
                <div class="col-9">Some form field</div>
            </div>
            <div class="col-12 frmLine">
                <!-- ... -->

我的 CSS（相关样式）：

html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    height: auto;
    margin: 0 auto -140px;
    min-height: 100%;
    overflow: auto;
    padding: 0 0 140px;
}
#main {
    border: 1px solid #000; /* This is what is not working ! */
    margin-left: 8.33%;
    margin-right: 8.33%;
}
.frmCaption {
    font-weight: bold;
}
.frmField {
    display: block;
    width: 100%;
}
.frmLine {
    margin: 0;
    padding: 0;
}

更新： 我做了一些进一步的测试，表明这是由 CSS 引起的。然后我删除了所有样式并逐步重新添加它们，这表明问题是由我的网格样式引起的（见下文），特别是它们上的浮动样式。 一旦我添加了这些样式，主要部分周围的边框就会消失。被移到该部分上方 - 有人可以告诉我如何解决这个问题吗？

/* ... */
.col-12 {
    width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}   
.row:after {
    clear: both;
    content: '';
    display: block;
}

提前非常感谢， 迈克

Answer 1

不知何故，overflow 的默认值（大部分，如果不是全部）block 级别元素（即visible）导致溢出的元素可见，但元素本身不调整其自己的大小。通过将overflow 设置为hidden，元素会调整自己的大小。

#main {
    border: 1px solid #000;
    margin-left: 8.33%;
    margin-right: 8.33%;
    overflow: hidden;
}