用固定和流动列布局并清除浮动

Question

我需要创建一个两列布局:

1. 左栏固定，右栏流动;
2. 每个栏目都有一个窗口，包括标题（带选项卡和菜单）和正文。

固定/流动的布局已经实现了，但是在右栏中有一个头部div（选项卡）和正文div（窗口2的主体）之间有间隙:

我创建了一个Fiddle示例: http://jsfiddle.net/4sk3bkde/

当我使用.clear类来清除浮动时，问题似乎会发生:

.clear:after {
  content: "";
  display: table;
  clear: both;
}

HTML代码如下：

<div class="wrapper clear">

  <div class="fixed">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 1
      </div>
    </div>

  </div>

  <div class="fluid">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 2
      </div>
    </div>

  </div>

</div>

而 CSS 代码是：

.clear:after {
  content: "";
  display: table;
  clear: both;
}

.fluid,
.fixed {
  border: 1px solid black;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.fixed {
  float: left;
  width: 250px;
}

.fluid {
  margin-left: 250px;
}

div.window {
}

div.head {
  border: 1px solid red;
}

ul.tabs {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

ul.tabs li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

a {
  display: inline-block;
  float: right;
}

为什么我在使用clear时会遇到这个问题？如何解决？

为什么我在使用clear时会遇到这个问题？如何解决？

- Miguel Moura

---

当你使用浮点数后，务必使用clear。仅仅使用clear会填充你的浮点元素。 - Laurentiu

你有一堆浮动元素。清除浮动元素的clearfixes将在你给他们的每个机会尝试清除尽可能多的浮动元素。 - BoltClock

是的，我在每个包含浮动子元素的元素上添加了clear...问题是为什么会出现这样的空间。 - Miguel Moura

Answer 1

除非你想模仿表格的行为，否则你不希望你的显示变成表格。

我所要做的相关更改是将 display 更改为 inline-block 或 inline-table。

.clear:after {
  content: "";
  display: inline-block;
  clear: both;
}

正如您在代码片段中所看到的，如果 display 属性设置为 table，则主体内容的更改不会影响流式标题的大小。

.clear:after {
  content: "";
  display: inline-table;
  clear: both;
}

.fluid,
.fixed {
  border: 1px solid black;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.fixed {
  float: left;
  width: 250px;
}

.fluid {
  margin-left: 250px;
}

div.window {
}

div.head {
  border: 1px solid red;
}

ul.tabs {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

ul.tabs li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

a {
  display: inline-block;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.2/mootools-core-compat.min.js"></script>
<div class="wrapper clear">

  <div class="fixed">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
      </div>
    </div>

  </div>

  <div class="fluid">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        
      </div>
    </div>

  </div>

</div>

- santon

---

我认为更好的解决方案可能是使用一个特定的清除头部的类：.clear { overflow: hidden; } ... 这个方法可行... 我不确定使用inline-block会不会产生其他问题... 会吗？你使用哪种clearfix？ - Miguel Moura

请查看此链接：http://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ - santon

Answer 2

给流体类设置右浮动和宽度。 https://goo.gl/I6nLss 因为流体样式不在浮动中，但固定样式是在浮动中

- Arun