css - 为什么显示: flow-root; invalid in mobile

Question

我的响应式 css 脚本上有 display: flow-root;。在浏览器响应测试上完美运行，但在我的设备上失败。

在我的设备上显示无效当我通过 chrome 中的远程设备检查时，我能够知道这一点。 我可以使用任何替代方案吗？？。

Answer 1

如果不需要支持IE9或更低版本，可以自由使用flexbox，不需要使用 float 布局。

值得注意的是，如今，随着更好的替代品的使用，越来越不鼓励使用 float 元素进行布局。

• 显示:内联 block - 更好
• Flexbox - 最佳(但浏览器支持有限)

Firefox 18、Chrome 21、Opera 12.10 和 Internet Explorer 10、Safari 6.1(包括 Mobile Safari)和 Android 的默认浏览器 4.4 均支持 Flexbox。

有关详细的浏览器列表，请参阅:http://caniuse.com/flexbox .

(也许一旦它的位置完全确立，它可能是绝对推荐的元素布局方式。)

---

clearfix 是一种元素自动清除其子元素的方法，因此您无需添加额外的标记。它通常用于 float 布局，其中元素 float 以水平堆叠。

clearfix 是一种对抗 zero-height container problem 的方法 用于 float 元素

clearfix 执行如下:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

或者，如果您不需要 IE<8 支持，以下也可以:

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

通常您需要执行以下操作:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

使用 clearfix，您只需要以下内容:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

阅读 this article - by Chris Coyer @ CSS-Tricks