网页设计浮动和清除浮动

打开WebStorm开发工具，新建‘test.html’文件写代码如下：                      

查看效果如下图，这是没有浮动的情况，每个div都是一个块级标签，上下排列独占一行

使用浮动方式，修改代码如下：                      

查看效果如下图，变成了并排的一行，说明一下因为两个宽度加起来不足100%，当超过100%还是会变成两行。

清除浮动，一般用于嵌套div的父div中，目的为了当父div未设置高度，使用伪元素填充使子div高度撑起父div，如不使用清除浮动，代码如下：              

查看效果如下图，父div的高度为空，因为浮动的便签脱离了文档流

解决上述问题，使用伪元素填充，代码如下：              

再次查看效果就正常了