用float对元素布局

用float对元素布局
开发工具：Dw 技术：HTML5、css
作者：陆桂超
撰写时间：2019年 1 月 18 日
1、 下面我们用float来实现一些元素的页面布局，在这里会遇到一个小问题，下图是要实现的效果。

2、 按照常规的做法，给p标签分别设置左浮动和右浮动。

3、 把HTML代码写好后，这时我们发现绿色的div没有显示出来，通过检查可以发现绿色的div是存在的，只是被p标签覆盖了，这是因为浮动带来的影响。
备注：这时绿色的div就在下图标记的位置

4、既然是浮动的影响，那么我们就要清除浮动带来的影响，做法就是给绿色的div添
加clear:both 这时就能达到我们想要的效果。代码和效果如下图所示。