浮动:
(1)如果在标准流中一个盒子里面有多个标签,并且该盒子没有设置高度,那么盒子的高度就由盒子内的多个标签的内容高度撑起。
(2)如果一个盒子里面多个标签都被设为了浮动,父级高度塌陷
解决方法:
1、使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)
ps:IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决ie6,ie7浮动问题
2、添加新的空元素对其应用 clear:both
3、父级div定义overflow:hidden
4、父级div定义overflow:auto
5、父级定义高度height
代码实例:
html
<!-- 清除浮动,方法1 利用伪元素清除--> <div class="case1-div1 clearfix"> <div class="div2"></div> <div class="div3"></div> </div> <!-- 清除浮动,方法2 添加新的空元素对其应用 clear:both--> <div class="case2-div1"> <div class="div2"></div> <div class="div3"></div> <div class=div4></div><!-- 添加一个空元素 --> </div> <!-- 清除浮动,方法3 父级div定义overflow:hidden--> <div class="case3-div1"> <div class="div2"></div> <div class="div3"></div> </div> <!-- 清除浮动,方法4 父级div定义overflow:auto--> <div class="case4-div1"> <div class="div2"></div> <div class="div3"></div> </div> <!-- 清除浮动,方法5 父级定义高度height--> <div class="case5-div1"> <div class="div2"></div> <div class="div3"></div> </div>
CSS
/* case1 */ .case1-div1{ border:2px solid blue; } .clearfix:after{ content:"."; /*设置内容为空*/ height:0; /*高度为0*/ line-height:0; /*行高为0*/ display:block; /*将文本转为块级元素*/ visibility:hidden; /*将元素隐藏*/ clear:both; /*清除浮动*/ } .clearfix{zoom:1;/*兼容IE*/} .div2{ width:100px; height:100px; background:red; float:left; } .div3{ width:100px; height:100px; background:blue; float:left; } /* case2 */ .case2-div1{ margin-top:10px; border:2px solid yellow; } .div4{ clear:both; /*对空元素使用clear:both*/ } /* case3 */ .case3-div1{ margin-top:10px; border:2px solid green; overflow:hidden;/*父级div定义overflow:hidden*/ } /* case4 */ .case4-div1{ margin-top:10px; border:2px solid orange; overflow:auto;/*父级div定义overflow:auto*/ } /* case5 */ .case5-div1{ margin-top:10px; border:2px solid skyblue; height:100px;/*父级div设置固定高度*/ }
效果:
codepen地址:https://codepen.io/murphyyya/pen/VweZpGp