浮动不能正确清理会导致元​​素隐藏在它们后面

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标签。

希望它有所帮助！

Answer 2

这是因为你标签内容 - 位置：绝对

这个变种可能适合吗？

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.tabs{
    max-width: 650px;
    margin: 20px;       
    font-size: 0;
}
.tabs input[type="radio"]{
    display: none;
}
.tabs label{
    display: inline-block;
    padding: 10px 20px;
    background: #2C3E50;
    color: #fff;    
    font-size: 24px;   
}
.tabs label:hover{   
    background: #4B6988;
}
.tabs label:active,
.tabs label:focus{   
    background: #0088CC;
}
.tabs input[type="radio"]:checked + label{
    display: inline-block; 
    background: #0088CC;
    color: #fff;
}
.tab-content{
    display: none;
    font-size: 14px;
    font-family: 'segoe ui';
    padding: 15px;
    border: 1px solid #ccc;
    border-top: none;
    position: relative;
}
.tab-content:before{
    content: '';
    position: absolute; top: 0; left: -1px;
    width: calc(100% + 2px);
    height: 10px;
    background: #08C;    
}
.tab-content h3{
    font-size: 22px;
}
.tabs #tab1:checked ~ #tab-content1,
.tabs #tab2:checked ~ #tab-content2,
.tabs #tab3:checked ~ #tab-content3{     
    display: block;
}

＆＃13;

<div class="tabs">    
    <input type="radio" id="tab1" name="tabs" checked />
    <label for="tab1">Tab 1 </label>
    
    <input type="radio" id="tab2" name="tabs" />
    <label for="tab2">Tab 2</label>
    
    <input type="radio" id="tab3" name="tabs" />
    <label for="tab3">Tab 3</label>
    
    <div class="tab-content" id="tab-content1">
        <h3>Tab 1</h3>
        <p>Some content</p>
    </div>
    <div class="tab-content" id="tab-content2">
        <h3>Tab 2</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
    <div class="tab-content" id="tab-content3">
       <h3>Tab 3</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </div>   
</div>

<p>Some other content</p>

＆＃13;

＆＃13;

＆＃13;

Fiddle