💂 个人网站:【紫陌】【笔记分享网】💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

1.为什么使用浮动。

很多网页布局效果，标准流是做不到，所以就要是用浮动来完成布局，浮动可以改变排列方式。

2.浮动引起的问题。

父元素高度塌陷，高度无法撑开。与元素同级的非浮动元素会紧随其后(遮盖现象)。 如果一个元素浮动，则该元素之前的元素也需要浮动;否则会影响页面显示的结构

3.解决方案(清除浮动）。

给父元素固定高度。没有设置浮动时，父元素的高度是height：auto 高度是由子元素撑开的；这个方法的缺点是，因为设置了固定高度，它的维护性是很差的，适用于固定高度布局。在浮动元素增加一个空div元素，设置样式 clear：both 要放在空元素上。缺点：布局添加了毫无意义的标签，如果有大量的使用无意义的div标签那么就造成很大的冗余。为父元素设置 overflow:hidden 。缺点：受限于overflow:hidden的主要功能，如果子元素的尺寸大于父元素，或者子元素中的内容过多，那么多出来的这一部分将不会溢出，也不会显示出来，会直接被hidden起来；因此这个方法不适用于子元素的内容过多；使用伪类 :after 只需要在父元素上添加一个class;类使用after伪元素，在父元素现有内容的末尾添加新的内容。添加的内容是一个display: block; clear: both;的空元素；

演示第四种解决方案，前面三个很简单。

未清除浮动效果

未清除浮动高度塌陷

已清除浮动效果

效果完美