css浮动

浮动的作用

让元素脱离普通文档流，使其显示在标准流之上，元素只能在水平移动，不能在上下移动
可以用于图片，让周围的文字环绕图片

浮动造成的影响

在允许的空间内并排呈现，如果空间不够会自动换行
改变块级元素独占一行的特性，去掉多余的空间，浮动的元素宽高等于该元素实际内容所占的内容宽高
浮动会脱离正常文档流，后面的元素会顶替浮动元素原先所占的位置
浮动会使父元素的高度坍塌
内嵌元素设置浮动后可以设置宽高

解决浮动造成的影响

1.清除浮动
为后面不浮动的元素设置clea:left,right,both属性
当值为left时清除左边的浮动，为right时清除右边的浮动，为both时清除两边的浮动
2.为塌陷的父元素设置宽高可以防止后面的元素顶替上来导致布局混乱
3.为父元素设置浮动，让父元素和子元素一起浮动（不推荐使用）
4.为父元素设置overflow：hidden，设置overflow后父元素的高度为浮动的子元素的高度
5.为塌陷的父元素添加一个after伪类，为这个伪类设置clear属性