html - float 不正确清除导致元素隐藏在它们后面

Question

我试图让一个段落 ( <p> ) 在一些内容之后显示，但无论我做什么，它仍然隐藏在前一个元素后面。

.tabs input[type=radio] {
    display:none;
}
 
.tabs {
    width: 650px;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 20px;
}
 
.tabs li{
    float: left;
}
 
.tabs label {
    display: block;
    padding: 10px 20px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: normal;
    background: #2c3e50;
    cursor: pointer;
    position: relative;
}
 
.tabs label:hover {
    background: #3498db;
}
 
.tab-content {
    z-index: 2;
    display: none;
    left: 0;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding: 15px;
    position: absolute;
    box-sizing: border-box;
    border:1px solid #ccc;
    border-top: 10px solid #08C;
    background-color:#ffffff;
}

[id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
}
 
[id^=tab]:checked ~ [id^=tab-content] {
    display: block;
}

<ul class="tabs">
    <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">tab 1</label>
        <div id="tab-content1" class="tab-content">
            <h3>Tab 1</h3>
            Some content.
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">tab 2</label>
        <div id="tab-content2" class="tab-content">
            <h3>Tab 2</h3>
            Some more content.
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">tab 3</label>
        <div id="tab-content3" class="tab-content">
            <h3>Tab 3</h3>
            Even more stuff.
        </div>
    </li>
</ul>
<br style="clear: both;" />

<p style="clear:both;">
Some other content
</p>

如您所见<p>包含“其他一些内容”的内容隐藏在选项卡后面。我尝试使用 clear: both尽管它有所帮助，但该段落仍未如我所料出现在选项卡之后。我希望它看起来像这样:

一个丑陋的修复是限制选项卡的高度，使用 overflow: auto对于里面的内容，然后设置一个巨大的margin-top对于有问题的段落。但是必须有更好的方法来做到这一点。

Answer 1

如果这个 ul.tabs 有一个固定的高度，你可以这样做:

.tabs
    min-height: 190px

这将强制选项卡容器的高度并将 p 标签向下推。

希望对您有所帮助!