点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
浮动和清除是用来组织页面布局的又一柄利剑，这柄利剑的剑刃就是float和clear属性。
浮动
浮动，你看这俩字儿多形象，意思就是把元素从常规文档流中拿出来。拿出来干什么。
一是，可以实现传统出版物上那种文字绕排图片的效果。
二是，可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。
浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。
清浮
所以，需要清除浮动，常规的清除浮动方法有下面三种：（通过一个demo来看一下具体如何清除浮动）
按常规讲述的方式，先给大家展示一下 demo 的结构和样式：
下面是这个DEMO的CSS
展示出来是下面这样的
这是一个常规的文档流，即块级元素包围着所有子元素。而且在页面中自上而下相互堆叠在一起。
现在我来让图片标题位于图片右侧，而不是像现在这样位于下方。很明显就是给图片加一个浮动，如下代码：
img{float:left}
效果变成这样了：
