浮动float

应用场景：文字环绕、横向排列

浮动的基本特点：修改 float属性值 left / right 默认值为 none、当一个元素浮动后、元素必定为块盒 (更改display:block;)

浮动元素的包含块、和常规流一样、为父元素的内容盒

盒子尺寸：宽度为auto时适应内容宽度、不是吸收什么内容空间、这一点同常规流还是有区别的

高度为auto时、同常规流一致、适应内容的高度 关于margin无论什么方向、margin:auto;为0

边框、内边距、百分比设置同常规流一样

盒子排列：left靠上靠左、right靠上靠右、浮动盒子在包含块中排列时、会避开常规流块盒 外边距合并不会发生

反过来、常规流块盒在排列时、无视浮动盒子、这就是为什么往往一但使用浮动要对父级清除浮动

行盒在排列时、会避开浮动盒子、为什么P元素是块盒结合图片配合浮动可产生文字环绕效果 留距离应该设置图片margin值而不是P元素

如果文字没有在行盒中、浏览器会自动生成一个行盒包裹文字、该行盒叫匿名行盒 行盒可以给看作是内容

浮动常见问题：高度坍塌

高度坍塌根源：常规流盒子的自动高度、在计算时、不会考虑浮动盒子

解决办法：清除浮动 clear: none 默认值 / left 清除左浮动 / right 清除右浮动 / both 清除浮动;

常常利用伪元素、在浮动盒子的下方添加一个常规流盒子、然后对这个常规流盒子清除浮动、代码如下

.clearfix::after{content:""; display:block; clear:both;}