如果您不需要支持IE9或更低版本，则可以自由使用flexbox，也不需要使用浮动布局。
值得注意的是，如今，随着使用更好的替代方案，越来越不鼓励使用浮动元素进行布局。
display: inline-block
-更好- Flexbox- 最佳（但对浏览器的支持有限）
Firefox 18，Chrome 21，Opera12.10和InternetExplorer10，Safari6.1（包括MobileSafari）和Android的默认浏览器4.4支持Flexbox。
（也许一旦位置完全确定，这可能是绝对推荐的元素布局方式。）
clearfix是元素 自动清除其子元素的 一种方法，因此您无需添加其他标记。它通常用于将元素浮动以水平堆叠的 浮动布局 中。
clearfix是 解决浮动元素的 零高度容器问题的一种方法
一个clearfix执行如下：
.clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both;}或者，如果您不需要IE <8支持，也可以使用以下命令：
.clearfix:after { content: ""; display: table; clear: both;}通常，您需要执行以下操作：
<div> <div >Sidebar</div> <div ></div> <!-- Clear the float --></div>
使用clearfix，您仅需要以下内容：
<div > <div >Sidebar</div> <!-- No Clearing div! --></div>
