水平列表后无法清除浮动答案

【问题标题】：Can't clear float after horizontal list水平列表后无法清除浮动
【发布时间】：2020-07-08 18:41:59
【问题描述】：

我正在创建一个表单并使用浮动水平显示一组单选按钮以节省空间。但是，之后我无法清除浮动，收音机下方的标题就在它们旁边。

html代码如下：

<div class="choice">

<ul>

<li><label for="yes">Yes</label><input type="radio" name="newsletter" id="yes" value="yes"/></li>
<li><label for="no">No</label><input type="radio" name="newsletter" id="no" value="no"/></li>

</ul>

</div>

<h2>Questions or Comments</h2>

而我的 CSS 如下：

.choice ul li label {width: 30px;}

.choice ul li {float:left;}

.choice {clear:both;}

输出如下所示（星号代表此处的单选按钮）：

Would you like to subscribe to our newsletter?

Yes * No * Questions or Comments

【问题讨论】：

你想在下一行显示 h2 内容吗..？
是的，我希望它位于下一行。

标签： list forms radio-button css-float

【解决方案1】：

我尝试使用sample by clear left 选择 div。更改了.choice 样式，如下所示，

CSS：

.choice:after {content:"#"; visibility:hidden; clear:both;}

检查sample这对你有用吗。

【讨论】：

在 Firefox 和 Opera 中看起来不错，但在 IE（我使用的是 IE 9）中，h2 仍然与单选按钮在同一行。
other solution 正在将 celar:left 应用于 h2 标签。

【解决方案2】：

h2 {clear:both;}

上面的方法都试过了，效果不错。

【讨论】：

【解决方案3】：

你使用这个样式代码

.choice ul li {clear:both}

【讨论】：

【解决方案4】：

这是清晰的代码。

HTML：

<div class="choice">

<ul>

<li><label for="yes">Yes</label><input type="radio" name="newsletter" id="yes" value="yes"/></li>
<li><label for="no">No</label><input type="radio" name="newsletter" id="no" value="no"/></li>

</ul>
    <div class="clear"></div>
</div>

<h2>Questions or Comments</h2>

CSS：

.choice ul li label {width: 30px;}

.choice ul li {float:left;}

.clear {clear:both;}

欢呼.......

【讨论】：