清除浮动的几种方法

清除浮动的几种方法

         虽然浮动能在不少地方发挥作用，很多时候用起来也的确很方便，但是有很多时候也正是因为浮动，所以原本该在预想地方的盒子或其他元素、内容与前面的东西叠在了一起，这就是因为浮动的元素脱标了，所以后面的元素才会误认为那块地方没有东西，才会跑上去，导致重叠的现象。那么常用的清除浮动的方法有哪些呢？

    1.给父盒子加overflow:hidden，这样既清除了浮动的影响，父盒子又能被撑起高度。这种方法不存在结构和语义化问题，代码量极少，但是内容增多时容易因不易换行而导致内容被隐藏掉，无法显示被溢出的元素。

    2.使用display:block,有换行的作用，能够清除部分浮动的影响。这相当于在该元素所在的那一行放了砖，所以即使下一个元素具有浮动的特性，也无法跟它同处一行。

    3.给父盒子加上高度(height)。当父盒子有了固定的空间时，里面的子盒子就不可能在父盒子外面乱跑了。但是页面的内容不是一成不变的，所以父盒子的高度也是不一定的。父盒子的高度是由内容决定的，所以这种方法不利于修改。

    4.添加额外标签。这跟方法三比较相像，但又有所不同。毕竟这是空标签，不存在出现这个标签内部会重叠的现象。但是通过这种方法会添加不少无意义的标签，容易导致代码混乱，有违结构与表现的分离。

    5.给父盒子加浮动。能够清除影响，也能让父盒子撑起高度，但是同时也带来了新的浮动影响问题。