为什么显示：flow-root；手机端无效

Question

我有display: flow-root;我的响应式css脚本。在浏览器上完美运行，responsive test但是fails on my device.

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

Answer 1

如果不需要支持IE9以下，可以自由使用flexbox，不需要使用浮动布局。

值得注意的是，如今，随着更好的替代方案的使用，使用浮动元素进行布局越来越不受欢迎。

• display: inline-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 是一种让元素自动清除其子元素的方法，这样您就不需要添加额外的标记。它通常用于浮动布局，其中元素浮动以水平堆叠。

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>

在这篇文章中阅读相关内容- Chris Coyer @ CSS-Tricks