如何清除絕對定位的元素？

Question

fiddle

標題上層建築它上面的內容的顯示。

將Twitter的.clearfix添加到容器似乎不能解決問題。我不確定如何將我的標題欄放在其上方的內容下方。

對此提出建議？

---

.clearfix（來自Twitter的引導）參考 - 寫在less：

.clearfix { 
    *zoom: 1; 
    &:before, 
    &:after { 
    display: table; 
    content: ""; 
    // Fixes Opera/contenteditable bug: 
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 
    line-height: 0; 
    } 
    &:after { 
    clear: both; 
    } 
} 

而且使用像：

.title-tabs { 
    .clearfix;   /* HERE */ 
    border-bottom: 1px solid #91b6eb; 
    position: relative; 
    h3 { 
    float: left; 
    margin: 0; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    } 
    /* etc... */ 

Answer 1

這裏是你正在尋找可能什麼

http://jsfiddle.net/rUQ2z/2/

<div class="main-content"> 
    <div class="container"> 
    <div class="access-details"> 
     <div class="pull-left"> 
     <div>Logged in: <b>John Doe</b> 
     </div> 
     <div>Access Lvl: Noob</div> 
     </div> 
     <div class="pull-right"> 
     <div>Sunday, January 13th, 2013</div> 
     </div> 
    </div> 
    <div class="title-tabs clearfix"> 
     <h3>Client Details</h3> 
     <ul class="nav"> 
     <li class="active"><a href="#">Details</a> 
     </li> 
     <li><a href="#">Program</a> 
     </li> 
     <li><a href="#">Special</a> 
     </li> 
     <li><a href="#">Docs</a> 
     </li> 
     <li><a href="#">Notes</a> 
     </li> 
     </ul> 
    </div> 
    <p>Welcome to Client Details</p> 
    </div> 
</div> 

h3 { 
    font-size: 36px; 
} 
.clearfix { 
    *zoom: 1; 
    &:before, &:after { 
    display: table; 
    content:""; 
    // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; 
    } 
    &:after { 
    clear: both; 
    } 
} 
.title-tabs { 
    .clearfix; 
    border-bottom: 1px solid #91b6eb; 
    position: relative; 
    h3 { 
    float: left; 
    margin: 0; 
    display: block; 
    left: 0; 
    bottom: 0; 
    } 
    ul { 
    float: right; 
    margin: 0; 
    display: block; 
    right: 0; 
    bottom: 0; 
    li { 
     float: left; 
     a { 
     display: block; 
     padding: 3px 5px; 
     background-color: #f9fafe; 
     .border-radius(5px, 0, 0, 5px); 
     border-color: #91b6eb; 
     border-width: 2px 2px 0 2px; 
     border-style: solid; 
     text-transform: uppercase; 
     font-weight: bold; 
     } 
    } 
    li + li { 
     margin-left: -2px; 
    } 
    } 
} 

沒有必要使用float類型的絕對位置：你要麼使用花車，要麼使用相對/絕對位置。

您希望將clearfix應用於包含您的float的容器，該容器將更新容器的高度，從而允許低於clearfix的內容與上面的內容不重疊。

編輯

如果你正在尋找一個備選答案涉及您想要的菜單項浮動權，並調整底部，那麼表動態內容是一個辦法做到這一點。

看看下面的代碼。我將容器作爲表格，title-tabs是標題行，並且我添加了ul-container，這樣我就可以將菜單項包含在表格單元格中。

http://jsfiddle.net/rUQ2z/11/

<div class="main-content"> 
    <div class="container"> 
    <div class="access-details"> 
     <div class="pull-left"> 
     <div>Logged in: <b>John Doe</b> 
     </div> 
     <div>Access Lvl: Noob</div> 
     </div> 
     <div class="pull-right"> 
     <div>Sunday, January 13th, 2013</div> 
     </div> 
    </div> 
    <div class="title-tabs"> 
     <h3>Client Details</h3> 
     <div class="ul-container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Details</a> 
     </li> 
     <li><a href="#">Program</a> 
     </li> 
     <li><a href="#">Special</a> 
     </li> 
     <li><a href="#">Docs</a> 
     </li> 
     <li><a href="#">Notes</a> 
     </li> 
     </ul> 
     </div> 
    </div> 
    <p>Welcome to Client Details</p> 
    </div> 
</div> 

h3 { 
    font-size: 36px; 
} 
.clearfix { 
    *zoom: 1; 
    &:before, &:after { 
    display: table; 
    content:""; 
    // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; 
    } 
    &:after { 
    clear: both; 
    } 
} 
.container { 
    display: table; 
    width: 100%; 
} 

.title-tabs { 
    .clearfix; 
    display: table-row; 
    border-bottom: 1px solid #91b6eb; 
    position: relative; 
    h3 { 
    margin: 0; 
    vertical-align: bottom; 
    display: table-cell; 
    left: 0; 
    bottom: 0; 
    } 
    .ul-container { 
    display: table-cell; 
    text-align: right; 
    vertical-align: bottom; 
    } 

    ul { 
    margin: 0; 
    display: inline-block; 
    right: 0; 
    bottom: 0; 
    li { 
     float: left; 
     a { 
     display: block; 
     padding: 3px 5px; 
     background-color: #f9fafe; 
     .border-radius(5px, 0, 0, 5px); 
     border-color: #91b6eb; 
     border-width: 2px 2px 0 2px; 
     border-style: solid; 
     text-transform: uppercase; 
     font-weight: bold; 
     } 
    } 
    li + li { 
     margin-left: -2px; 
    } 
    } 
} 

Answer 2

發生了什麼事是你.title僞的選項卡設置爲相對的，和H3設置爲絕對和底部，因爲你.title僞的選項卡不具備的高度，所以H3元素將採用最後一個底部並從.title-tabs行中移出。從h3 css中移除底部。