float属性

1>概念

设置了float属性的元素为浮动元素，浮动元素会脱离文档流，但不是真正意义上的脱离文档流因为文字可以看到浮动元素，而且浮动元素也会相互看到，它不仅影响自己还影响周围的元素对齐进行环绕

2>浮动元素对自己的影响：生成块级框（可以设置宽高，不设置宽度时宽高由内容撑开，不继承父级宽度，可以在一行显示，换行符不解析）

      对块级元素：不设置宽度时不继承父级宽度，宽高由内容撑开，在一行显示

      对行内元素：可以设置宽高，换行符不解析

3>浮动元素的规则：

1》浮动元素的margin不会超过包含块的padding（想要超过可以设置margin属性）

2》如果有多个浮动元素，浮动元素会按顺序排列下来而不会发生重叠现象

3》如果两个元素一个向左浮动，一个向右浮动，左浮动的marginRight不会和右浮动的marginLeft相邻

情况一：包含块的宽度足够大，两个元素一个左浮动，一个右浮动井水不犯河水

情况二：包含块的宽度小于两个浮动元素的宽度总和，后面的浮动元素会向下浮动，其顶端是前面浮动元素的底端

4》如果非浮动元素和浮动元素同时存在而且非浮动元素在在前，则浮动元素不会高于非浮动元素

5》浮动元素尽可能的向顶端对齐，向左或向右对齐

3>特殊情况：

1》浮顶元素的延展性:元素被设置为浮动后，该元素会进行延展进而包含其所有浮动的子元素

2》浮动元素宽度大于父级元素宽度:它会超出父级元素的内边距，左浮动超出父级元素的右内边距，右浮动超出父级元素的左内边距

3》重叠问题:浮动元素和普通文档流中的元素重叠（设置margin-top为负值）

普通文档流中是行内元素：边框，背景，内容都在浮动元素之上

普通文档流中是块元素：边框，背景会显示在浮动元素之下，内容会显示在浮动元素之上

4>clear属性：确保当前元素的左右两侧不会有浮动

clear只对元素本身的布局起作用

5>float和position相互影响

1》元素同时设置了relative和float，则先浮动到相应位置在根据所设置的距离来进行偏移

2》元素同时设置了absolute/fixed和float，float失效

3》元素同时设置了absolute/fixed和float，导致清除浮动无效

4》第一个元素设置了absolute/fixed之后会覆盖后面的float元素(如果不将float元素设置成relative的话，想要通过z-index来覆盖absolute元素是无效的)