关于添加一个spacer div来修复CSS浮动div问题

Question

我正在学习CSS。我正在努力将我的表单元素正确排列。特别是submitBtn div的最后一个元素，这是我的问题：

浮动的submitBtn div不包含在formContainer div中，这是我的代码（spacer div已关闭）：

* {
    margin: 0;
    padding : 0;    
}

li {
    list-style : none;
}

#mainContainer {
    width : 760px;
    margin : 20px auto ;
    background-color : red;
}

#header {
    background-color: blue;
}

#formContainer {
    background-color : green;
}

#textInfo {
    background-color : yellow ;
}

#occupationInfo {
    background-color : purple ;
}

#hobbyInfo {
    background-color : pink ;   
}

#birthdayInfo {
    background-color : brown ;
}

#briefInfo {
    background-color : darkblue;
}

#submitBtn {
    width : 50px;
    float : right;
    clear : both;
    background-color : black ; 
}

/*#spacer {
    clear : both;
}*/

但是，当我取消注释它时，它解决了问题：

除了添加间隔div之外，还有其他更清洁的解决方案吗？

Answer 1

除了Diego的解决方案，您还可以尝试将overflow:auto添加到formContainer。发生这种情况的原因是因为父元素永远不会扩展以包含浮动元素。浮动元素将“溢出”其容器。

Answer 2

是的，您可以使用clearfix方法。

将以下代码添加到CSS中：

/*** Clearfix ***/
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

然后将课程clearfix分配到您的容器div。