CSS浮动及高度塌陷问题

float浮动

通过浮动使元素向其父元素的左侧或右侧移动

float： left right none（默认值）

浮动特点：

• 浮动元素会脱离文档流，不再占用文档流的位置。
• 设置浮动后元素会向父元素的左侧或右侧移动、
• 浮动后元素仍在其父元素中没有移出。
• 浮动元素不会超过它前面的浮动元素

总结：目前浮动的主要作用是让页面中的元素可以水平排列

浮动的其他特点

• 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。

元素脱离文档流之后的特点

• 原来的块元素 不再独占一行
• 浮动后宽高默认被内容撑开
• 原来的行内元素浮动后可以设宽高

浮动后的不需区分块元素和行内元素

float高度塌陷问题

解决高度塌陷：

• 设置元素浮动 不推荐
• 设置元素display：inline-block  不推荐
• 设置overflow： 非visible
• clear: left right both 清除浮动元素对当前元素的影响

解决外边距重叠问题

• 伪元素
• clearfix这个样式同时解决高度塌陷问题和外边距重叠问题