一文掌握CSS 属性display:flow-root声明

下面是关于CSS属性display: flow-root的详细讲解。

什么是display: flow-root？

display: flow-root 是 CSS3 中新增的一个属性值，它可以提供一个清除浮动（clearfix）的方式。它会创建一个新的块级格式化上下文，使得其内部浮动元素不会对外部元素造成影响，同时也不需要使用其他清除浮动的技巧。

如何使用display: flow-root？

在CSS中，使用display: flow-root非常简单，只需要将其应用到需要清除浮动的元素上即可：

.container {
  display: flow-root;
}

此时，.container元素将成为一个新的块级格式化上下文，并且清除其内部浮动元素（即.container内部的元素）对外布局造成的影响。

display: flow-root经典实例

下面我们将通过两个经典示例来说明display: flow-root的应用。

示例一

下面是一个简单的HTML布局代码：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

假设.left和.right都是使用浮动布局，.container元素中的内容不会自适应高度，于是我们需要清除浮动以使布局正确，这时候就可以使用display: flow-root：

.container {
  display: flow-root;
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}

此时，.container即可正常显示内容并且自适应高度。

示例二

下面是一个带有浮动菜单的导航栏布局：

<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
  </ul>
  <div class="clear"></div>
</nav>

菜单栏中的<li>元素都使用了浮动布局，为了防止浮动内容对导航栏造成影响，我们需要添加一个使用display: flow-root的容器：

nav {
  display: flow-root;
}
.menu {
  float: left;
}
.clear {
  clear: both;
}

此时，导航栏即可正常显示，没有浮动内容对其布局造成影响。

小结

通过本文的介绍，相信大家已经对display: flow-root有了更深入的理解。使用这个属性值可以非常方便地清除浮动对布局造成的影响，避免很多复杂的清除技巧的使用。