介绍
在CSS的学习过程中，相信有不少盆友会有跟我一样的疑问：就是在使用float属性来进行页面布局时某些div层会出现消失的情况，接下来我将会在此博文中简单分享一下我对float的理解使用，并使用position属性来实现相同效果的页面布局，此博文主要是针对页面布局来进行简单的讲解，其中涉及的知识点大家如果觉得不够清楚的话，可以在CSDN平台上获取更多的优秀博文，进行更加深入的学习，不对的地方请大家指出～相互学习～
我们要实现的页面布局效果如下：
为了使得页面布局效果更加清晰直观，我为div选用的是对比比较鲜明的背景颜色，页面由5个div层构成，此页面布局在我们实际运用中也是很常见的，我们可以在顶层div中添加导航条等，所以我们了解和掌握float属性的使用也是很必要的。
Float属性及初步页面布局
在进行页面布局前，让我们来简单了解一些float的属性，float可以设置为left、right、both和none，当设置float属性为left或right时，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。要注意的是：浮动元素是完全脱离文档流的，这也意味着浮动元素会对相邻的元素产生影响，这也是下节要讨论的知识点——如何消除浮动。这节我们先将搭建整体页面的框架：
在页面布局中主要有头部div层，内容div层以及尾部div层，内容div层包括左部div、中间div以及右部div，分别对应于效果图中的绿色块、黑色块以及蓝色块。
接下来我们来为div层进行简单的样式设置：
我们给div设置固定的宽高（当没有向div层中添加元素时不设置固定宽高的话，在页面中没有效果，建议在实际进行页面设计时，使用百分比的形式设置宽高来更好地适应浏览窗口的大小）以及背景颜色，此时页面展示的效果如下：
因为div的高度设置较大，所以分了两部分截图～大家不要介意～
可以看出来我们内容div层是竖向排列的，这也与div是块级元素有关
这里给大家简单介绍一下块级元素和行级元素：
1.块级元素：浏览器会默认在块前以及块后进行换行，可以理解一个块级是占据文档流中一整行的位置，典型的块级元素有：div、p、h1～h6等；
2.行级元素：在一行内显示的元素，浏览器不会进行换行，典型的行级元素有：a、span、strong等。
CSDN上有很多十分优秀的博文，大家如果不理解的话可以多去看看～
实现内容层div的水平布局
接下来，我们将实现内容层的左部div、中间div以及右部div进行水平排列
我们在内容层的左部div、中间div以及右部div样式设置中添加float:left;样式，实现div的水平向左浮动，此时页面的效果如下：
想必大家也注意到了，尾部的div层消失了，原因是浮动元素会对相邻元素产生影响，若相邻元素是块级元素，浮动元素后方的块级元素会被覆盖，而对于行内元素来说，行内元素是将呈现环绕浮动元素的效果。那我们应该如何去解决这样的问题呢，接下来我将为大家简单讲解一下消除浮动常用的五种方法。
消除浮动常用的方法
这一节我将跟大家简单介绍一下消除浮动常用的方法，首先我们要先明确，为什么要清除浮动呢？正如我们在进行页面布局时，可能会出现像上面效果图一样底层div消失不见的情况，原因是当我们设置浮动属性后，浮动元素会对后续的元素产生影响，这可能导致我们得不到想要的页面布局效果，在CSDN中有很多讲解消除浮动的重要性以及意义的美文～大家可以进行深入的学习哦～
消除／闭合浮动的方法：
1.在内容层div使用br属性进行清除浮动
2.在内容层div中添加额外的标签并为之设置clear属性，这里给大家简单介绍一下clear属性
clear:both表示全部清除样式，这也就达到了我们消除浮动的目的
3.在父元素，即内容层div中设置overflow:hidden或overflow:auto样式，两个属性值都能够达到我们清除浮动的目的
4.为父元素设置display:table属性
通过以上四种方法我们能够清除页面布局时浮动元素的影响，呈现出最终的页面效果。
Position的四种属性
在这一节中我将给大家简单介绍一下position的四大属性，并在下一节中使用position属性代替float来实现相同的页面布局。
1.static（静态定位）：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框置于其父元素中，需要注意的是static属性不能通过z-index来进行层次分级；
2.relative（相对定位）：按照元素的原始位置对该元素进行移动，元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留，也就是说relative不脱离文档流；
3.absolute（绝对定位）：参照最近一个具有定位设置的父级对象进行绝对定位，即元素框从文档流中完全删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭，元素定位后生成一个块级框。需要注意的是参照定位的父级元素position最好设置为relative相对定位；
4.fixed（固定定位）：类似于absolute绝对定位，不过其包含块是浏览器试图窗口本身。
Position属性实现页面布局
大致介绍完position属性后我们就可以开始使用position属性来代替float进行页面布局了，为了能够更好的展示页面效果，我将内容层div的高度缩小到40px，初始CSS样式为：
页面效果为：
首先，我们使用position属性将黑色div层放置于绿色div层的右边
在父元素content容器中设置position:relative表示黑色层div将以content为参照进行绝对定位，top表示与content容器顶部没有间距，margin-left表示参照content容器我们需要向右移动的单位，因为我们要实现将黑色div放置在绿色div的右边，所以我们将margin-left设为绿色div的宽度，这样我们就很好的实现了黑色div在绿色div右边的效果了
要实现蓝色div在黑色div的右边原理也是一样的，因为absolute是参照距离元素最近的一个具有定位设置的父级对象进行绝对定位，所以蓝色div层也是相对于content进行移动的
要注意的是此时margin-left要设置为绿色div＋黑色div的宽度，否则蓝色div会覆盖黑色div进行显示，这样我们很快就实现了我们要的页面效果：
使用position属性进行布局区别于float主要的好处在于：position不用考虑浮动元素的影响，在使用float属性进行布局时我们对元素进行清除浮动的操作，否则会影响后续元素在页面中的显示。
总结
通过对使用float以及position属性进行页面布局的简单讲解以后，相信大家对于页面布局有了更深层次的认识，希望博文对大家的学习有所帮助～谢谢大家