羞耻的问一个CSS问题

问题描述

问 题

绿色DIV为何是顶端对齐的，只能显示下面一截。见鬼。它有80PX高啊。现在看跟绝对定位似的，可明明是相对的。

解决方案

问题知识点：float、clear两个属性

1、float特性：当一个块级元素被设置为flaot：left或right时，就会脱离文档流。

2、clear特性：文档流中的块级元素，如果其上有元素被设置为float：left或者right时，如果不设置clear：left或者right时，这个文档流元素就会被覆盖住；如果设置了clear：left或者right时，就会清除浮动，就不会被覆盖。

根据float，clear属性的特性分析：

divD在文档流中，divA，divB，divC设置了float：left，脱离了文档流；而divD没有清除浮动，所以会出现下面的现象：divD高80px，divA，divB，divC都高50px，所以divD有50px被divA，divB，divC覆盖了。

下列是推论出的衍生现象：

1、如果你divD高度小于80px就会完全被divA，divB，divC遮住。

2、如果你给divD添加clear：left属性，divD就不会被遮住了。

这篇关于羞耻的问一个CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！