float诞生的原因
一项技术的诞生一定是为了解决某一个问题，而使float诞生的原因就是为了实现文字环绕图片
float是如何实现文字环绕图片的
- 使父级元素的高度塌陷
如果float不能够使父级塌陷，那么文字会按照正常流排版，无法实现围着图片环绕的效果
- 行框盒子的区域限制：行框盒子与浮动元素的不可重叠性
float有什么特点
- 包裹性：浮动元素在不设置宽度的情况下，宽度表现为其子元素的宽度大小
- 自适应性：如果浮动元素有父级元素，并且父级元素有固定宽度，那么呈现包裹性的浮动元素最大宽度为其父级的定宽宽度
- 块状化：设置了float的值部位none的时候，那么该元素的display为block，即使通过手动设置display为其他属性也无济于事。块状化后，其余的行内块元素属性也无用（text-align、vertical-align）
- 破坏了文档流
- 由于形成了BFC，不会有任何的margin合并
float能够发生的依据
浮动锚点：就是流中存在的一个不浮动的点，就像是一个空的内联元素，有了内联元素就自然而然的生成了行框盒子，于是这个空的行框盒子就是浮动锚点
- 而float能够发生的依据就是这个行框盒子
使用clear解决float所带来的问题
定义与用法：
- clear不是清楚浮动，准确的说是抗浮动，clear这个属性，本质是让设置了clear的自身元素不与前面的浮动元素相邻，也就是说clear对后面的浮动元素是不闻不问的
- 如果元素全部都
float:left那么后面的元素设置clear:left与clear:both都是有效果的- 如果元素全部都
float:right那么设置clear:rigth与clear:both都是有效的clear:left与clear:right只能够生效一个，同时设置是没有意义的，不如直接使用clear:both作用：
- 仅仅是让自身不和前面的元素相邻排列，并没有“解决”父级塌陷的功能
tip：
- clear属性仅仅争对块级元素才有效果，before或者after等伪类元素都是内联水平，所以我们使用这种方式清楚浮动的时候，需要为这个内联水平的盒子设置
display:block或display：table才有效果
