CSS清除浮动的几种有效方法
- 父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏 - 结尾处加空div标签clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，影响性能 - 父级div定义伪类:after和zoom（最靠谱的方案）
原理：IE8以上和非IE浏览器才支持:after，原理和方法2类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除浮动</title> <style> *{ padding:0; margin:0; } /* 方式1 */ /* .parent{ border:2px solid green; overflow:hidden; } */ /* 方式3(推荐) */ .parent{ border:2px solid green; zoom:1; } .parent:after{ content:""; clear:both; display: block; visibility: hidden; } .A{ 100px; height:100px; background-color: aqua; float:left; } .B{ 100px; height:100px; background-color: burlywood; float:left; } /* 方式2 */ /* .C{ clear:both; } */ </style> </head> <body> <div class="parent"> <div class="A"></div> <div class="B"></div> <div class="C"></div> </div> <div></div> </body> </html>