前置知识
- 图片(未浮动)默认会与上方最后一行文字基线对齐
- 图片(未浮动)默认会与下方第一行文字基线对齐
补充:正是由于基线对齐,所以图片下方会出现空隙!
浮动规则
浮动元素对其上方元素的影响
浮动元素对行内文本的影响:
- 图片或块级元素设置float:left;之后,向左浮动,直到外边缘碰到包含它的框或者另外一个浮动元素的边框为止。
- 浮动之后变为块级元素,vertical-align属性失效
vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。只对行内元素、表格单元格元素生效,不能用它垂直对齐块级元素。
浮动元素对其他元素的影响:
- 浮动元素不能比前一个块级元素或浮动元素高。
- 尽可能高的前提下,尽可能靠左/右
- 当上一行剩余宽度不足时,float元素会显示在下一行
浮动元素对其下方元素的影响
浮动元素与块级元素重叠:
- 边框、背景 会显示在浮动元素之下;
- 文本内容环绕浮动元素;
- 边框、背景、内容都环绕浮动元素
整体来看,浮动元素对布局的影响
- 图片浮动后与上方最后一行文字对齐,下方文字环绕图片
- 浮动元素不能比前一个块级元素或浮动元素高。
- 浮动元素会与下方块级元素重叠
图片下方的空隙是由图片右下角那一行文字撑开的
总结
- 浮动元素不能比前一个块级元素或浮动元素高。
- 尽可能高的前提下,尽可能靠左/右
- 当上一行剩余宽度不足时,float元素会显示在下一行
- 元素浮动后仍然会与上方文字最后一行对齐(由于上方宽度不足);下方文字将环绕其排列
学识浅薄,还请各位老大多多指教!