Html 如何清除绝对定位的元素？

标题显示在其上方内容的上方

将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... */

---

这可能就是你要找的

登录：John Doe
访问级别：Noob
2013年1月13日，星期日
客户详细信息












欢迎访问客户详细信息

h3{
字体大小：36px；
}
.clearfix{
*缩放：1；
&：之前和之后{
显示：表格；
内容：“；
//修复了Opera/contenteditable错误：//http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952线高：0；
}
&：之后{
明确：两者皆有；
}
}
.标题选项卡{
.clearfix；
边框底部：1px实心#91b6eb；
位置：相对位置；
h3{
浮动：左；
保证金：0；
显示：块；
左：0；
底部：0；
}
保险商实验室{
浮动：对；
保证金：0；
显示：块；
右：0；
底部：0；
李{
浮动：左；
a{
显示：块；
填充物：3px 5px；
背景色：#f9fafe；
.边界半径（5px，0，0，5px）；
边框颜色：#91b6eb；
边框宽度：2px2p02px；
边框样式：实心；
文本转换：大写；
字体大小：粗体；
}
}
李+李{
左边距：-2px；
}
}
}

在使用float的同一个类上不需要position:absolute。可以使用浮动，也可以使用相对/绝对位置

您希望将clearfix应用于包含浮动的容器，该浮动将更新容器的高度，从而允许clearfix下方的内容不与上方的内容重叠

编辑

如果您正在寻找一个处理动态内容的替代答案，您希望菜单项向右浮动并对齐底部，那么表格就是一种方法

看看下面的代码。我将容器设置为表格，将标题选项卡设置为标题行，并添加了ul容器，以便将菜单项包含在表格单元格中

登录：John Doe
访问级别：Noob
2013年1月13日，星期日
客户详细信息












欢迎访问客户详细信息

h3{
字体大小：36px；
}
.clearfix{
*缩放：1；
&：之前和之后{
显示：表格；
内容：“；
//修复了Opera/contenteditable错误：//http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952线高：0；
}
&：之后{
明确：两者皆有；
}
}
.集装箱{
显示：表格；
宽度：100%；
}
.标题选项卡{
.clearfix；
显示：表格行；
边框底部：1px实心#91b6eb；
位置：相对位置；
h3{
保证金：0；
垂直对齐：底部对齐；
显示：表格单元格；
左：0；
底部：0；
}
.ul集装箱{
显示：表格单元格；
文本对齐：右对齐；
垂直对齐：底部对齐；
}
保险商实验室{
保证金：0；
显示：内联块；
右：0；
底部：0；
李{
浮动：左；
a{
显示：块；
填充物：3px 5px；
背景色：#f9fafe；
.边界半径（5px，0，0，5px）；
边框颜色：#91b6eb；
边框宽度：2px2p02px；
边框样式：实心；
文本转换：大写；
字体大小：粗体；
}
}
李+李{
左边距：-2px；
}
}
}

发生的情况是，您的.title选项卡被设置为相对，而h3被设置为绝对和底部，因为.title选项卡没有高度，所以h3元素将占据最后一个底部并超出.title选项卡行。删除h3 css的底部。

您在

clearfix

类上设置了哪些css属性？@FelipeOriani:这是直接从Twitter引导中删除的。请参阅update.AFAICS。这将使用SASSsyntax@roXon我编辑了标签搜索与相对定位或绝对定位的元素的z索引堆叠无关。你刚刚取消了绝对定位吗？我在里面的原因是要把标签底部对齐，我似乎不能这样做。使用边距来做，而不是绝对位置。如果处理动态内容，还可以使用“显示：表格单元格”，然后使用“垂直对齐：中间”和“文本对齐：左/右”。我试图使用“表单元格”，但这只会导致更多问题。我将“显示：内联”块替换为浮动：就在css的ul选择器中，它起作用了。谢谢你的解释。但从理论上讲，标签可能比

h3

高，在这种情况下，我希望

h3

底部对齐，因此移除它并不理想。

    <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;
    }
  }
}

<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;
    }
  }
}