浮动元素知识点总结

一.浮动元素特性 

 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. 浮动元素与正常流中的内容发生重叠(有负外边距)。 
     - 当行内框与一个浮动元素重叠时,其边框、背景、内容都在该浮动元素之上;
     - 当块框与一个浮动元素重叠时,其边框、背景在该浮动元素之下显示,内容在该浮动元素之上显示。
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页