css - 关于添加间隔 div 以修复 CSS 浮动 div 问题

Question

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

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

* {
    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。