Last active
December 18, 2015 05:29
-
-
Save zhangskills/5733361 to your computer and use it in GitHub Desktop.
CSS浮动DIV撑开父层高度的问题
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="content"> | |
<div class="left"></div> | |
<div class="right"> | |
</div> | |
<div style="clear:both;"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.clearfix:after { /*在类名为“clearfix”的元素内最后面加入内容;*/ | |
content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/ | |
display: block; /*加入的这个元素转换为块级元素。*/ | |
clear: both; /*清除左右两边浮动。*/ | |
visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/ | |
line-height: 0; /*行高为0;*/ | |
height: 0; /*高度为0;*/ | |
font-size:0; /*字体大小为0;*/ | |
} | |
.clearfix { *zoom:1;} /*这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment