float 浮动布局最初是用来做图片被文字环绕的效果的，一个p标签里img标签，p标签属于块标签，段落，是双标签，img标签是可以设置宽高的行标签，具有两个属性，分别是src=”图片的路径地址”alt=”图片加载失败时出现的替代文字说明”。
如今的float多用来布局，设置浮动元素，元素会脱离文档流，往设置的方向进行浮动，直到遇到父级边界或是另外一个浮动元素就会停止浮动。浮动的元素会脱离文档流，撑不开父级的高度。于是就会想到怎么来清除浮动，其中，最简单的方法就是给父级设置高度。即clear: left | right |both;
还有就是设置浮动对块级元素和行级元素的影响。块级元素设置浮动之后，块级元素的宽不再默认继承父级的宽度而是由内容撑开。行级元素设置浮动之后，行级元素可以设置宽高和盒模型。就是可以说设置浮动之后，就不会区分块级元素还是行级元素。
然后再回到清除浮动的话题，方法二就是在浮动元素的后面加上一个不浮动元素，并给此元素设置clear: both| left |right；就能清除前面元素的浮动。但是这样我们会发现增大了代码量，所以接下来又学了伪元素。
伪元素格式为，如下图：
伪元素
前两句都是必须写的，这样写可以方便代码复用，其中图中间的那句zoom:1; 是针对ＩＥ浏览器的兼容，可以写在base.css中，方便使用，减少代码量。
that’ all, thank you!