浮动元素知识点总结

一.浮动元素特性

1. 取值 float:left/right/none/inherit,用于所有元素。
2. 清除浮动 clear:left/right/both/none/inherit，用于块级元素（元素浮动后会成为块级元素）
3. 浮动元素从文档流中删除，但依然影响布局。
4. 浮动元素的外边距不会合并。
5. 浮动一个非替换元素，则必须为该元素声明一个with，否则元素的宽度趋于0。
6. 浮动元素的包含块是其最近的块级祖先元素。
7. 浮动元素会生成一个块级框，而不论该元素本身是什么。
8. 浮动元素不会重叠、覆盖，而定位容易导致元素相互覆盖。
9. 浮动元素不能超出其包含元素的边界。若超出，会下移到另一行。
10. 后浮动元素不会超过先浮动元素。

二.特殊情况

1. 浮动元素比其父元素高（例如浮动元素的下边界超出父元素底端） 解决方法：将父元素设置为浮动元素，就可以把浮动元素包含在其父元素内。
2. 负外边距（是被允许的）可能导致浮动元素移动到其父元素外面。当浮动元素比其父元素更宽时也会导致这种情况。

3. 浮动元素与正常流中的内容发生重叠（有负外边距）。

   - 当行内框与一个浮动元素重叠时，其边框、背景、内容都在该浮动元素之上；
   - 当块框与一个浮动元素重叠时，其边框、背景在该浮动元素之下显示，内容在该浮动元素之上显示。