上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。
为什么要清楚浮动？
地址：/baidu_37107022/article/details/71554283
1.清除浮动方法概览
2.clear方法
代码演示
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 200px;background: red;}/*1.left 元素的左边不能有浮动的元素*//*.div1{float: left;}.div2{clear: left;}*//*2.right 元素的右边不能有浮动的元素*//*.div1{float: right;}.div2{clear: right;}*//*3.both 元素的两都不能有浮动的元素*/.div1{float: left;}.div2{float: right;}.div3{clear: both;}</style></head><body><!--clear 元素的某个方向上不能有浮动的元素left 元素的左边不能有浮动的元素right 元素的右边不能有浮动的元素both 元素的两都不能有浮动的元素--><div class="div1">kaivon1</div><div class="div2">kaivon2</div><div class="div3">kaivon3</div></body></html>
效果图
清除浮动前：div3钻到了div1下面
清除浮动后：
3.方法2–6的
代码演示：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;/*2、给父级添加高度：没有从根本上解决浮动的问题*//*height: 100px;*//*3、inline-block*//*display: inline-block;margin: 0 auto;*//*4、overflow:hidden;*//*overflow: hidden;*/}.box{width: 100px;height: 100px;background: green;float: left;}</style></head><body><!--清除浮动的方法1、clear2、给父级添加高度有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）3、inline-block具有与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了4、overflow:hidden;如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令5、空标签空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差6、br清除浮动与上面的问题是一样7、after伪类清除浮动（现在最主流的方法）--><div class="parent"><div class="box"></div><!--5、空标签--><!--<div style="clear: both;"></div>--><!--6、br清除浮动--> <br clear="all" /></div></body></html>
效果图
清除浮动前：
清除浮动后：
4.after伪类清除浮动（现在最主流的方法）
代码演示
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;}.box{width: 100px;height: 100px;background: green;float: left;color: #fff;}/** 7、after伪类清除浮动（现在最主流的方法）* * .box:after{content: '这是伪类生成的内容';}*/.clearfix{*zoom:1;}.clearfix:after{content: '';display: block;clear: both;}</style></head><body><!--清除浮动的方法1、clear2、给父级添加高度有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）3、inline-block具胡与上一个的清除浮动一样的总是，同时加了以后这个元素就没有办法居中了4、overflow:hidden;如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令5、空标签空标签是没有内容，但是它的作用是用来清除浮动的，所以不符合行为、样式、结构相分离的标准ie6下标签是有一个最小高度19px，解决后也会有2像素的偏差6、br清除浮动与上面的问题是一样7、after伪类清除浮动（现在最主流的方法）after 代表选择到的元素的内容的最后面after伪类的内容默认是一个行内元素content设置的内容--><div class="parent clearfix"><div class="box"></div></div></body></html>
效果图同上（第3点）
如果觉得《一天搞定CSS： 清除浮动（float）--13》对你有帮助，请点赞、收藏，并留下你的观点哦！
![[CSS]CSS浮动float详解（三）：清除浮动方案](https://sm.tqys.net/uploadfile/pic/400.jpg)
![css --- [读书笔记] 浮动(float) 与 清除浮动](https://sm.tqys.net/uploadfile/pic/256.jpg)
