在写页面布局的过程中，浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。

4034c9.png" alt="" width="794" height="89">

分享一下我对浮动这块知识的总结。

显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

属性

标签 float:left; 属性，看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展示的，但是看下图会发现他们按照顺序排列成一排了。

Box中的p标签一个 float:right; 属性。他们会按照顺序排到右边去了。

p

5.把外面的div宽度变小一些，p浮动

显示。

“卡住”。初始样式是左图

301379d62e69ba66ce6a298f8824f08.png" alt="" width="363" height="326">

文字的影响 p标签浮动

文字可以围绕浮动框显示

显示

内容撑开宽

支持margin

不支持margin:auto;

1. 为什么要清除浮动？

前面提到了我给了外面的div一个高度，这里我们不给他高度，让里面的p浮动看看会发生什么情况。

 　　我们会发现子元素浮动会造成父级盒子高度坍塌，这样如果下面在进行继续布局的话会使页面布局错乱，(下图中黄色的盒子是nav下的div)如果想要继续布局就要清除浮动了，这里我介绍几种清除浮动的方法。

标签和样子如下两幅图

nav属性，下图会发现可以正常显示

显示，并没有撑开Box

Box显示。

内容撑开高度，拓展性不好。     

Box显示

margin:auto;

显示

添加一个元素。加上一个属性

显示

添加一个空元素，不符合代码规范

方法。

添加给Box显示，不发图了。