浮动与清除浮动

添加浮动

float 属性规定元素如何浮动。

值	描述
left	规定元素浮动到父元素素左侧
right	规定元素浮动到父元素素右侧
none	默认值元素不浮动
inherit	元素继承父元素的float值

浮动的元素向左或向右浮动时，直到它的外边框碰到父元素边框或另一个浮动元素的边框为止。

浮动产生的目的是为了做图文混排、文字环绕效果，因为浮动的元素只会压住标准流中的元素不会遮住标准流中的文字，正常布局时应当避免使用float属性（可以选择定位、flex布局）。

元素浮动后将脱离标准流，由于浮动元素父盒子很多情况下不方便给定高度，但是子盒子脱标后不占有位置，最后造成父元素高度为0，因此我们需要清除浮动。

清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响。

• 如果父盒子本身有高度，则不需要清除浮动。

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了。

清除浮动的策略是：闭合浮动

清除浮动的方法

1.W3C推荐做法:额外标签法(隔墙法）

此方法是在浮动子元素的末尾添加一个空的标签来闭合浮动（新添加的标签必须是块级元素）

例如:<div style="clear:both"></div>

或者其他标签，（如<br />等）

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

2.父级添加overflow属性

给父元素添加overflow属性，将其属性值设置为hidden，aotu或scroll

优点：代码简洁

缺点：无法显示溢出部分

3.父级添加after伪元素

优点：结构简单

缺点：不照顾低版本浏览器

4.父级添加双伪元素

此方法与第三种方法差不多，比第三种方法更常见