Web前端基础部分——清除浮动影响

浮动的特征

浮动的元素脱离标准文档流，简称“脱标”

浮动的元素相互紧密贴靠

浮动的元素具有“字围”现象

浮动的元素会对后面的元素造成影响

清除浮动的方法

给父盒子加上高度（不常用）

因为我们的元素基本上是由内容撑起的高度，不会给予固定值。

虽然此方法可以清除，但由于给定了固定的高度，在项目进行修改时，难免会动一发而牵全身。

给父盒子加上clear:both

给父盒子加上clear:both后，虽然可以清除，但是父盒子的margin值会失效，也就是说父盒子塌陷了。所以也不推荐使用。

外墙法

在浮动的两个父盒子之间加上一个样式为clear:both的div,通常来讲，就是在两个浮动的父盒子之间，用一堵墙隔开以此来实现清除。这个方法虽然可以清除浮动，的margin值也能设置，但是父盒子是不能设置高度的。

内墙法

就是在浮动的父盒子最前面或最后加上一个样式为clear:both的div，这个方法可以清除浮动，也有高度，但页面中会多出许多无用的div,代码过于冗杂。

overf：hidden

本意是一出盒子的部分隐藏起来，但给一个浮动的父盒子加上这个属性也能清除浮动。这种方法技能清除浮动，又让盒子有了高度，还不会多出一些空盒子，所以做项目的过程中，这种方法最为常用。