高度坍塌的原因
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高.
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷.由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱.
解决办法：经常使用的清除浮动的方案：
clearfix 方案【原理：就是在这个父元素的最后创建一个伪元素 after。通过这个伪元素的一系列相关属性，就达到了清除浮动的目的】
使用伪元素 after 在父元素尾部添加一个元素
对这个添加的伪元素应用清除浮动的样式
必备三大样式：content、clear、diaplay
可选三大样式：height、font-size、visibility（可见不可见） height: 0px;
font-size: 0px;
visibility: hidden;【可选样式，主要为了保证呀，我们在实际开发的过程中，浏览器的兼容性能更好一些。他们的目标只有一个，就是要保证 after 伪类不在页面上显示出来。因为我们这个伪类，就是用来清除浮动，我们并不希望其显示出来，影响我们页面的布局。即我们想让这个伪类去干活，但又不想让他露脸。】
display:none 与 visibility:hidden;的区别：
display 设置为 none ，不可见，整个这个元素不占用任何的物理空间，压根像是不存在一样。
但是如果是 visibility 的话，设置成不可见的时候，同样也会占用物理空间，只是你看不见他，但是那个坑还在。
例如：
.clearfix:after { content:";clear:both;display:block; }.clearfix:after { content:";clear:both;dislpay:block;height:0px;font-size:0px;visibility:hidden;}
复制代码
练习例子 1：必备三大样式：content、clear、diaplay
<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 { border: 1px solid #000; } .left { width: 200px; height: 200px; background: yellow; float: left; } .right { width: 200px; height: 200px; background: green; float: right; } /* 使用伪元素 可以达到清除浮动的效果 与上一节方法1-使用clear清除浮动-异曲同工*/ .clearfix:after { /* 如果要使用伪元素，一定要设置content 意思是指，你伪元素的内容是什么， 因为我们的目的是清除浮动， 所以这里设置为""空 就好了*/ content: ""; clear: both; /* 为什么要设置成block？ 弄明白这里 我们就需要深入理解一下浮动和清除浮动的底层原理 如果上一节方法1-使用clear清除浮动 我们不是用的div 而是用span 那将不会达到清除浮动的效果！！ 即必须是块级元素(这样，他的宽度能够自动和父元素一致)， 内联块级inline-block也是不行的！必须是block块级！*/ display: block; } </style></head><body> <!-- 可以达到清除浮动的效果 --> <div class="box clearfix"> <div class="left"></div> <div class="right"></div> </div></body></html>
复制代码
练习例子 2：可选样式也加上，保驾护航
height: 0px;
font-size: 0px;
visibility: hidden;
<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 { border: 1px solid #000; } .left { width: 200px; height: 200px; background: yellow; float: left; } .right { width: 200px; height: 200px; background: green; float: right; } /* 使用伪元素 可以达到清除浮动的效果 与上一节方法1-使用clear清除浮动-异曲同工*/ .clearfix:after { /* 如果要使用伪元素，一定要设置content 意思是指，你伪元素的内容是什么， 因为我们的目的是清除浮动， 所以这里设置为""空 就好了*/ content: ""; clear: both; /* 为什么要设置成block？ 弄明白这里 我们就需要深入理解一下浮动和清除浮动的底层原理 如果上一节方法1-使用clear清除浮动 我们不是用的div 而是用span 那将不会达到清除浮动的效果！！ 即必须是块级元素(这样，他的宽度能够自动和父元素一致)， 内联块级inline-block也是不行的！必须是block块级！*/ display: block;
/* 有他们三个保驾护航，after伪类就不可能露脸 更纯粹的用于清除浮动，又不影响页面的布局*/ height: 0px; font-size: 0px; visibility: hidden; } </style></head><body> <!-- 可以达到清除浮动的效果 --> <div class="box clearfix"> <div class="left"></div> <div class="right"></div> </div></body></html>
复制代码
评论