原因分析
1、清除浮动是为了清除使用浮动元素的影响。高度塌陷的父元素。
如果一个块级元素没有设置height,它的height是由子元素打开的。
2、使用浮动后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以打开其高度,所以父级元素的height会被忽略。
这就是所谓的高度塌陷。
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .box { width: 510px; border: #0000FF solid 1px; } .box:after { content: ""; visibility: hidden; display: block; height: 0; clear: both; } .left { float: left; width: 250px; height: 100px; background-color: green; } .right { float: left; width: 250px; height: 100px; background-color: red; } .backdiv{ width: 100px; height: 100px; background: #101010; margin-left: 510px; } </style> </head> <body> <div> <div></div> <div></div> </div> <div></div> </body> </html>
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理