具有固定和流动列以及清晰浮动的布局答案

【问题标题】：Layout with Fixed and Fluid columns and clear floats具有固定和流动列以及清晰浮动的布局
【发布时间】：2015-11-03 18:10:03
【问题描述】：

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

左柱固定，右柱流体；
每列都有一个窗口，其中有一个 Head（带有选项卡和菜单）和一个 Body。

Fixed/Fluid 布局正在工作，但在右列中，head div（选项卡）和 body 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，clear 只会填充你的浮动元素。
你有一堆浮动元素。 clearfixes 会在你给的每一个机会尝试清除尽可能多的浮动。
是的，我在每个包含浮动子元素的元素上都添加了一个 clear ...问题是为什么我会得到那个空间

标签： html css

【解决方案1】：

除非您试图模仿类似表格的行为，否则您不希望您的显示器成为表格。

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

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

正如您在 sn-p 中看到的那样，如果 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>

【讨论】：

我认为也许更好的解决方案是对 head 使用特定的 clear: .clear { overflow: hidden; } ...这行得通...如果使用 inline-block 会产生其他问题，我不使用...会吗？你使用哪个 clearfix？
查看此链接yuiblog.com/blog/2010/09/27/…

【解决方案2】：

让流体类向右浮动并设置宽度。 https://goo.gl/I6nLss Bcoz 流体风格不在浮动，但固定在浮动

【讨论】：