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

Question

我的回复display: flow-root;脚本上有css。完全适用于浏览器responsive test但fails on my device。

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

Answer 1

display: flow-root;需要Chrome Canary或Firefox Nightlies。

将其设置为display: table;或display: block;

可以使用overflow：visiible来包含浮动元素。

Answer 2

如果您不需要支持IE9或更低版本，则可以自由使用flexbox，并且不需要使用浮动版式。

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

• display: inline-block-更好
• Flexbox -最佳（但对浏览器的支持有限）

Firefox，Chrome 21，Opera 12.10和Internet Explorer 10，Safari 6.1（包括Mobile Safari）和Android的默认浏览器4.4支持Flexbox。

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

（也许一旦位置完全确定，这可能是绝对推荐的元素布局方式。）

---

clearfix是一种元素自动清除其子元素的方式，因此您无需添加其他标记。通常用于 float布局，在这些布局中，元素被浮动以水平堆叠。

clearfix是一种对抗浮动元素 zero-height container problem 的方法

清除修补程序的步骤如下：

.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

中进行了解

此answer的原始post