首先我们要知道为什么要清除浮动？

如果说一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除（父元素因为子级元素浮动引起的内部高度为0的问题）

首先先写了一个正常的结构是在box没有设置高度的时候，里面是的两个div会默认的撑开，这是在没有设置浮动的时候

  <style>.box {width: 800px;border: 1px solid rgb(89, 89, 238);margin: 0 auto;}.damao {/* float: left; */width: 300px;height: 200px;background-color: rgb(36, 211, 218);}.ermao {/* float: left; */width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: rgb(174, 119, 206);}</style>  <div class="box"><div class="damao">哒哒哒</div><div class="ermao">喵喵喵</div></div><div class="footer"></div>

但是如果加上浮动的话

这时候能看到box的高度仅仅只有两个边框（2px）

清除浮动本质？

清除元素的本质就是清除元素脱离标准流造成的影响

清除浮动的策略？

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的方法1（额外标签法又称隔墙法）

这个是W3C推荐的方法（在浮动标签后加一个新的标签，并给其设置clear:both;）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮动之额外标签法</title><style>.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}.clear {clear: both;}</style>
</head><body><div class="box"><div class="damao">哒哒哒</div><div class="ermao">喵喵喵</div><div class="clear"></div><!-- 这个新增的盒子要求必须是块级元素不能是行内元素 --><!-- <span class="clear"></span> --></div><div class="footer"></div></body></html>

注意:这个新增的盒子要求必须是块级元素不能是行内元素(没有效果)

总结：额外标签法，又称隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加清除浮动样式.实际工作可能会遇到,但是不常用。

清除浮动的方法2（父级添加overflow）

可以给父级添加overflow属性，将其属性值设置hidden、auto或scroll。

    .box {/* 清除浮动 */overflow: hidden;width: 800px;border: 1px solid blue;margin: 0 auto;}

优点：代码简洁

缺点：无法显示溢出部分

清除浮动的方法3（after伪元素清除浮动）

:after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 专有 */*zoom: 1;}<div class="box clearfix"></div>

优点：没有添加标签，结构更简单

缺点：需要照顾低版本的浏览器

代表网站：百度、淘宝、网易等

清除浮动的方法4（双伪元素清除浮动）

也是给父元素添加

.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}<div class="box clearfix"></div>

优点：结构更简单

缺点：需要照顾低版本的浏览器

代表网站：小米、腾讯等

清除浮动的常用的几种方法相关推荐

清除浮动最常用的四种方法
1.为什么要清除浮动开发过程中,浮动是需要掌握的一个技能,页面布局当中,在无法确定子元素的高度(height)时,我们无法给父级标签一个固定的高度(height),我们想要的是,由子元素的高度去控制 ...
css清除浮动大全，共8种方法。
本文转载自:http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果 ...
常见的几种清除浮动（高度塌陷）的方法？
常见的几种清除浮动(高度塌陷)的方法? 我们经常把解决高度塌陷问题叫做清除浮动. 高度塌陷问题------指父元素高度自适应(即父元素不设置高度或高度为auto,这时的父元素就靠子元素来撑开),子元素 ...
spring boot项目中止运行最常用的几种方法
spring boot项目中止运行最常用的几种方法: 1. 调用接口,停止应用上下文 @RestController public class ShutdownController impleme ...
jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
【总结】清除webbrowser cookie/session的6种方法
下面是我测试下来的6种清除webbrowser中cookie的6种方法: 往下拉有详细用法 //方法一:调用 wininet.dll清除cookie (推荐) SuppressWininetBehav ...
PHP教程：WebService最常用的两种方法
国内用PHP写WebService的真的很少,网上资料也没多少,公司的项目开发过程中,经历了不少这方面的东西,写出来以供大家参考(谢谢老农提供的WSDL和程序文件) 客户端代码: 01. 02. ...
统计内表行数常用的三种方法
以下是统计内表行数常用的三种方法, 如下: 1．LOOP AT it_itab. g_lines2 = g_lines2 + 1. ENDLOOP. 该方法是通过循环内部表自己累 ...
java json的使用方法_JAVA编写JSON常用的三种方法
JAVA编写JSON常用的三种方法 Szx • 2019 年 11 月 15 日 1.jsonlib需要引入的包也多,代码也相对多一些. 2.Gson:谷歌的 3.FastJson:阿里巴巴的,这几个 ...

清除浮动的常用的几种方法