CSS 浮动布局例子

float 浮动用于布局，可以达到靠左靠右的效果，但是，当使用完 float 浮动之后，一定要清除浮动，要不然很可能会造成父容器的高度坍塌。

完全使用 float 来实现页面的布局是很常见的。这里有一个咱们之前用 position 实现的布局例子，这次我使用 float 实现了它：

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

<section> - 1

这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。

</section>

<section> - 2

float 浮动用于布局，可以达到靠左靠右的效果，但是，当使用完 float 浮动之后，一定要清除浮动，要不然很可能会造成父容器的高度坍塌。

</section>