我们为什么需要清除浮动，如果我们不清除浮动会发生什么呢？
基础样式，没清除浮动之前代码：
可复制也可以自己手动布局，后可尝试使用下面介绍的方法练习清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不清除浮动会发生什么</title> <style> * { margin: 0; padding: 0; } .father { width: 400px; background-color: red; } .son { width: 150px; height: 150px; float: left; background-color: pink; } .box { width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="father"> <div class="son">我是浮动后的子元素1</div> <div class="son">我是浮动后的子元素1</div> </div> <div class="box">我是下一个兄弟元素box</div> </body> </html>
未清除浮动之前的效果图：
如图所示：不清除浮动会影响布局，因为我们没有给父级高度，跟父级同级的元素会受到影响，因为给子元素添加浮动，浮动之后，子元素会脱离文档流，父级的下一个兄弟元素就会顶上去，浮动可以设置文字围绕
清除浮动后的效果：
让我为大家介绍八种清除浮动的方法吧！本人文笔有限，如有不对的地方可以向我提出，感谢大家！
一、给父级div定义伪类(推荐使用)
这个是清除浮动常用的方法
复制可用
.clearfix::after { display: block; content: ""; height: 0; overflow: hidden; clear: both; } .clearfix { zoom: 1; }
切记给浮动的父元素添加
二、clear:both
在浮动尾部添加空div标签，添加上样式clear:both；
.son1 { clear:both; }
三、overflow:hidden
给父级div定义overflow:hidden
overflow:hidden;
四、给父级固定的高度height
注意：不适合用在不确定高度的元素上，比如某宝，一直向下滑，会一直刷新出新的商品
五、父级随子级一起浮动
这种方法还是会影响接下来的布局，不过可以解决父级的问题
六、overflow:auto
给浮动元素父级添加overflow:auto;
七、display:table
给浮动元素的父级div定义为表格display:table
八、br标签
br中有clear属性，添加all可以清除浮动
清除浮动代码大总结，复制可玩：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动的八种方法</title> <style> * { margin: 0; padding: 0; } /* 第一种，给父级div定义伪类，父级没设置高度时 */ /* 记得给浮动元素的父级添加clearfix类名 */ /* .clearfix::after { display: block; content: ""; height: 0; overflow: hidden; clear: both; } .clearfix { zoom: 1; } */ .father { /* 第三种方法给浮动元素父级添加overflow:hidden */ /* overflow: hidden; */ /* 第四种方法给父级添加高度 */ /* height: 150px; */ /* 第五种方法父级随子级一起浮动 */ /* float: left; */ /* 第六种方法给父级添加overflow:auto */ /* overflow: auto; */ /* 第七种方法给父级添加display:table */ /* display: table; */ width: 400px; background-color: red; } .son { width: 150px; height: 150px; float: left; background-color: pink; } .box { width: 200px; height: 200px; background-color: orange; } /* 第二种方法 */ /* .son1 { clear: both; } */ </style> </head> <body> <!-- 第一种方法的给父级添加clearfix --> <div class="father"> <div class="son">我是浮动后的子元素1</div> <div class="son">我是浮动后的子元素2</div> <!-- 第二种方法clear:both; --> <!-- <div class="son1"></div> --> <!-- 第八种方法 --> <!-- <br clear="all"/> --> </div> <div class="box">我是下一个兄弟元素box</div> </body> </html>
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家!
