清除浮动的3种方式

接触前端至今已经2年多了，期间也有陆陆续续的学习，自感前端深似海，有时候学起来就有一种深深的无力感。但是我相信坚持下去必定有所收获，所以打算改变以前的学习方式，自今天开始做一些知识点的总结，一方面可以自行快捷查阅，另一方面可以帮助到别人，何乐而不为呢？来日方长，各位前端老铁加油吧！
下面我们进入文章的正题：

---

清除浮动常见的3种方式

• overflow:hidden
• clear:both
• 伪元素after来清除浮动

---

实现场景

方法一、

.box{
     overflow:hidden;
 }

　　先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
　　注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.

方法二、（本人常用）

.clear{
　　　clear:both;
}

　　　在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响, 但是有两种情况：
　　　1.在父标签内部：会将这个浮动盒子的父盒子高度重新撑开.
　　　2.在父标签外面：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
　　注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

方法三、
.clearfix:after{
　　　content:”“;//设置内容为空
　　　height:0;//高度为0
　　　line-height:0;//行高为0
　　　display:block;//将文本转为块级元素
　　visibility:hidden;//将元素隐藏
　　　clear:both//清除浮动
}
.clearfix{
　　　zoom:1;为了兼容IE
}
类.clearfix应该作用于浮动元素的父亲.

---