float浮动初步理解

float 浮动

三个值：
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
left 元素向左浮动
right 元素向右浮动
inherit 规定应该从父元素继承 float 属性的值。

特性：
脱离标准文档流，摆脱块级元素与行内元素的限制。
自动贴靠，超出行宽时，下个同级元素自动找空隙贴靠。与浮动的元素高度相加超过浮动元素的前一个元素的高度时，才自动换行。
脱离标准文档流，却没有脱离文本流。碰到文本会出现被包围效果，称为字围效果。
收缩效果，如果父元素没有设置高度，父元素会变成内容宽高，如果没有内容，父元素消失。

清除浮动：

浮动的弊端：
父元素如果没设高度，父元素高度坍塌，父元素消失
导致页面结构不稳定