html - float 的 div 不能并排放置，并留下无法解释的间隙

Question

我正在测试一些东西，我在其中显示 4 个超大图像，这些图像以填充屏幕的象限为中心。所以 2 行和 2 列。

□□
□□

图像位于应该堆叠的 4 个 div 的背景中。所有的 div 都有小边框。

我的问题是高度有效，但对于宽度，我需要从每个框的宽度中减去 9px 以使它们堆叠并且不再填满屏幕。没有 9px 它们看起来像:

□
□
□
□

这个 9px 的差距是多少？

最好在 jsfiddle 中看到它

#wrapper {
  background: pink;
  border: 5px red solid;
}
#container {
  background: fuchsia;
  border: 5px purple solid;
}
#content {
  background: aqua;
  border: 5px blue solid;
}
#parent {
  background: lime;
  border: 5px green solid;
}
#image1,
#image2,
#image3,
#image4 {
  background: yellow;
  border: 5px orange solid;
  
  /* Each div fill 1/4 screen so get 50% user screen viewport height/width and deduct the height/width of  everything outside of the image divs content area (box model).
So here we must deduct the 1 x 5px border on one side (image border) and 4 x 5px borders on the other side (image, parent, content & wrapper borders)*/
  height: calc(50vh - (5*5px));
  
  /* The line below should be the same as above ie:
      width: calc(50vw - (5*5px)) but I need to deduct a further unexplained 9px and now
      the 4 image divs wont fill the screen? */
  width: calc(50vw - (5*5px + 9px));
  
  float: left;
  
  /* set and center a background image to the div */
  background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
  background-position: center;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div id="wrapper">
  <div id="content">
    <div id="parent" class="clearfix">
      <div id="image1">
      </div>
      <div id="image2">
      </div>
      <div id="image3">
      </div>
      <div id="image4">
      </div>
    </div>
  </div>
</div>

Answer 1

float 不是为布局设计的。是的，它们已经以这种方式使用了几十年……作为 hack(CSS 没有提供更好的选择)。 float 旨在将文本环绕在图像周围，而不是构建网格。

视口(viewport)百分比长度是相对于初始包含 block 的，而不是父元素，如百分比长度。

您组合了 float 、边框、视口(viewport)百分比宽度和 box-sizing:content-box，您得到了 9px 的神秘差距。 (我没有深入研究，因为我的重点是针对您的问题的现代解决方案。)

---

今天有 CSS3，它提供了两种构建布局的方法:Flex Layout和 Grid Layout

Browser support for grid layout is still weak.

Browser support for flex layout is almost complete.

---

这是使用 flex、box-sizing:border-box 和百分比高度的布局:

html {
  height: 100%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;                      /* https://css-tricks.com/box-sizing/ */
}

body { 
  height: 100%;
  margin: 0;                                /* remove default margin */
}

#wrapper {
  background: pink;
  border: 5px red solid;
  height: 100%;
}

#container {
  background: fuchsia;
  border: 5px purple solid;
  height: 100%;
}

#content {
  background: aqua;
  border: 5px blue solid;
  height: 100%;
}

#parent {
  background: lime;
  border: 5px green solid;
  display: flex;                               /* establish flex container */
  flex-wrap: wrap;                             /* allow children to wrap */
  height: 100%;
}

#image1, #image2, #image3, #image4 {
  background: yellow;
  border: 5px orange solid;
  height: 50%;
  flex-basis: 50%;                              /* each item 50% wide */
  background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
  background-position: center;
}

<div id="wrapper">
  <div id="content">
    <div id="parent" class="clearfix">
      <div id="image1"></div>
      <div id="image2"></div>
      <div id="image3"></div>
      <div id="image4"></div>
    </div>
  </div>
</div>

jsFiddle

---

好处:

• 没有更多的神秘差距。
• 不再有花车。
• 没有更多的 clearfix。
• 无需添加边框并使用calc。
• 更干净、更高效的代码
• 布局是响应式的
• 与 float 和表格不同， float 和表格提供的布局容量有限，因为它们从未用于建筑布局，而 flexbox 是一种具有广泛选项的现代技术。

---

要了解有关 flexbox 的更多信息，请访问:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS 技巧
• What the Flexbox?! ~ YouTube 视频教程

---

浏览器支持:

所有主流浏览器都支持 Flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请使用 Autoprefixer .更多详细信息，请参阅 this answer .