html - CSS:在表单或主要内容上设置样式不起作用(但在内部)

Question

我是 CSS 的新手，希望有人能帮助我。

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

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

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

• border: 1px solid #000;
• 背景颜色:#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 引起的。然后我删除了所有样式并逐步重新添加它们，这表明问题是由我的网格样式引起的(见下文)，特别是由它们上面的 float 样式引起的。 一旦我添加了这些样式，主要部分周围的边框就会相应地消失。移到该部分上方 - 谁能告诉我如何解决这个问题？

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

非常感谢，迈克

Answer 1

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

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