如何清除CSS浮动以避免表单元素格式错乱？

问题根源 #

你给.event、.radio1、.gender、.radio2添加浮动后，这些元素脱离了正常文档流，后续的表单元素会向上填充浮动元素留下的空白区域，直接导致布局错乱。

方案一：用clear属性清除浮动 #

在浮动元素之后的第一个元素上设置clear: both，强制该元素在所有浮动元素下方显示。

调整后的HTML #

给第一个输入框的<p>标签添加类名，同时给性别单选框后的容器也加上清除类：

<!-- 姓名输入框部分 -->
<p class="clear-float">*Last Name: <input type="text" name="lastname" id="lastname" /></p>

<!-- 底部容器部分 -->
<div class="bottom clear-float">

调整后的CSS #

新增清除浮动的样式，同时优化单选区域的排版：

body{
    background-color: rgb(134, 210, 221);
}

.clear-float {
    clear: both;
}

.event, .gender {
    float: left;
    margin-right: 15px;
    line-height: 2; /* 让标题和单选按钮垂直居中 */
}

.radio1, .radio2 {
    float: left;
}

.radio1 p, .radio2 p {
    margin: 5px 0; /* 缩小单选按钮行间距 */
}

方案二：用Flex布局（更简洁，推荐新手） #

浮动布局容易引发清除问题，用Flex可以轻松实现横向排列，完全不用处理浮动清除：

调整后的HTML #

把标题和单选按钮放进同一个容器，同时修复单选按钮的互斥属性（必须加相同name）：

<!-- 赛事选择区域 -->
<div class="form-group">
    <p class="event">*Select Event:</p> 
    <div class="radio1">
        <p><input type="radio" id="stock" name="event">Stock</p>
        <p><input type="radio" id="modified" name="event">Modified</p>
    </div>
</div>

<!-- 性别选择区域 -->
<div class="form-group">
    <p class="gender">*Gender: </p> 
    <div class="radio2">
        <p><input type="radio" name="gender">Male</p>
        <p><input type="radio" name="gender">Female</p>
        <p><input type="radio" name="gender">Other</p>
    </div>
</div>

调整后的CSS #

删除所有浮动样式，改用Flex布局：

body{
    background-color: rgb(134, 210, 221);
    padding: 20px;
}

.form-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.event, .gender {
    margin-right: 20px;
    margin-top: 0;
}

.radio1 p, .radio2 p {
    margin: 5px 0;
}

/* 优化其他表单元素 */
form p {
    margin: 10px 0;
}

textarea {
    vertical-align: top; /* 让文本框和标签顶部对齐 */
}

额外修复细节 #

1. 单选按钮必须添加相同的name属性才能实现单选互斥，原代码缺失该属性
2. 原HTML末尾有多余的</select>标签，需要删除
3. 邮箱输入框的id和name错误使用了country，应改为email

内容的提问来源于stack exchange，提问作者gl1tch