CSS拾遗篇之浮动元素の影响

前置知识

• 图片（未浮动）默认会与上方最后一行文字基线对齐

• 图片（未浮动）默认会与下方第一行文字基线对齐

补充：正是由于基线对齐，所以图片下方会出现空隙！

浮动规则

浮动元素对其上方元素的影响

浮动元素对行内文本的影响：

• 图片或块级元素设置float:left;之后，向左浮动，直到外边缘碰到包含它的框或者另外一个浮动元素的边框为止。
• 浮动之后变为块级元素，vertical-align属性失效

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素。

浮动元素对其他元素的影响：

• 浮动元素不能比前一个块级元素或浮动元素高。
• 尽可能高的前提下，尽可能靠左/右

• 当上一行剩余宽度不足时，float元素会显示在下一行

浮动元素对其下方元素的影响

浮动元素与块级元素重叠：

• 边框、背景 会显示在浮动元素之下；
• 文本内容环绕浮动元素；

• 边框、背景、内容都环绕浮动元素

整体来看，浮动元素对布局的影响

• 图片浮动后与上方最后一行文字对齐，下方文字环绕图片

• 浮动元素不能比前一个块级元素或浮动元素高。
• 浮动元素会与下方块级元素重叠

图片下方的空隙是由图片右下角那一行文字撑开的

总结

• 浮动元素不能比前一个块级元素或浮动元素高。
• 尽可能高的前提下，尽可能靠左/右
• 当上一行剩余宽度不足时，float元素会显示在下一行
• 元素浮动后仍然会与上方文字最后一行对齐（由于上方宽度不足）；下方文字将环绕其排列

学识浅薄，还请各位老大多多指教！