css清除浮动

学习css和html有一段时间了，趁现在有空写点东西——css中清除浮动的几种方法：

一、为什么要清除浮动？

比如我们在写html布局的时候，常常会让一些子元素浮动起来，已达到我们预期的效果。但是随着元素浮动起来后，就脱离了正常的文档流，就好比从html中漂浮起来。此时，它们原本占据html中的空间就会释放出来，被后面的元素占据。因此，我们在子元素脱离了文档流后要清除浮动，以解决因为浮动而带来的新的布局麻烦。

二、清除浮动常用方法：

方法1：

父元素:after{//在父元素后添加一个元素
    display: block;//让这个元素成为块级元素
    content:".";//为安全起见，为这个元素添加一个点，
    height:0;//height为0，使得这个元素不占据空间
    visibility: hidden;//使得这部分内容在页面隐藏
    clear: both;//清除浮动
}

此种方法是我写html页面时最常用的方法，也是很安全的一种方法

方法2：

父元素:after，父元素:before{//在父元素的前后各添加一个元素
    display: table;//让添加的子元素以table的形式
    visibility: hidden;//隐藏这两个元素
}
父元素:after{
    clear:both;//在后面添加的这个元素清除浮动
}

此方法时我在模仿别人的网页时常见他们用到的，包括淘宝、途牛等官网

方法3、

父元素div的三个子div都浮动起来了，此时也可以在最后一个子div后面加上一句：

<br clear="both">

这种方法也能达到清除浮动的效果

<div>
    <div></div>
    <div></div>
    <div></div>
    <br clear="both">
</div>

方法4、

父元素{
    overflow: hidden;//隐藏溢出
    zoom:1;//兼容ie浏览器
}

有人或许会纳闷了，这么多中方法都是用来清除浮动的，我只会一种就ok啦！其实不然。css发展这么多年，先辈们有这么多种清除浮动的方法也不是凭空向出来的，我在这里只能说各种方法都有其存在的价值，大家以后在用的时候就会有体会了。

比如方法3中在父元素后面直接加一句

<br clear="both">

，看起来多省事啊，一句代码就搞定了，轻松简单。然而，我在做轮播的时候需要复制子元素，也就是克隆子元素，br标签也是子元素，也被克隆，克隆后变成这种造型：

<div>
    <div></div><div></div><div></div>
    <br clear="both">
    <div></div><div></div><div></div>
    <br clear="both">
    <div></div><div></div><div></div>
    <br clear="both">
</div>

但是要清除浮动的地方应该时父元素最后一个节点的位置。这种情况就导致我的轮播混乱。

当然，使用方法4也会很方便，但是有时候你会发现，我么你不需要对溢出的元素隐藏却因为父元素的

overflow: hidden;

这句话无情的隐藏了。所以大家在使用的时候要多多注意一下。