clear
清楚浮动方案
1、可以在父元素的底部，添加一个空白的块级元素，并且给该元素设置clear：both；（兼容各种浏览器，w3c推荐）
2、给父元素添加after伪元素（也就是在父元素的底部添加元素）
3、给父元素添加清楚浮动通用类clearfix
.clearfix:after { content: ""; display: block; clear: both; } .clearfix { zoom: 1; /*兼容ie6*/ }
父子外边距重叠
当子元素和父元素重叠时，给子元素添加外边距，会促发父元素
代码：
.box1 { width: 100px; height: 100px; margin-top: 100px; /* 给子元素添加上外边距，促发了父元素*/ background-color: pink; }
a
那如果是空标签呢？
经过测试一般的块级元素和内联元素，均无效。而只有table这个块级元素有效。
既然可以添加标签，那么我顺利想到了before伪元素。
完善clearfix
.clearfix:before, .clearfix:after { content: '.'; /*这里内容不为空是为了兼容firefox7 之前会生成空格*/ visibility: hidden; display: table;/*table是特殊的块级元素，所以可以替换block*/ clear: both; } .clearfix { zoom:1; /* 兼容ie: 6;*/ } 最终，我们明白了.clearfix这个通用类的完美写法。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209217.html原文链接：https://javaforall.net
