为什么父div没有被撑开
摘要:为什么父div没有被撑开:在正常情况下,如果父对象没有设置高度,子对象能够将子对象撑开,但是如果子对象浮动且没有清除浮动的话,在IE8或者FF浏览器,父对象并不能够被撑开,在IE6下可以撑开。代码实例:蚂蚁部落 以上代码在IE6下可以撑开父div,但是在IE8或者FF浏览器下不能够被撑开。解决...
为什么父div没有被撑开:
在正常情况下,如果父对象没有设置高度,子对象能够将子对象撑开,但是如果子对象浮动且没有清除浮动的话,在IE8或者FF浏览器,父对象并不能够被撑开,在IE6下可以撑开。
代码实例:
01 | <!DOCTYPE html> |
02 | < html > |
03 | < head > |
04 | < meta charset = " utf-8" > |
05 | < meta name = "author" content = "http://www.51texiao.cn/" /> |
06 | < title >蚂蚁部落</ title > |
07 | < style type = "text/css" > |
08 | .parent{ |
09 | border:1px solid red; |
10 | width:500px; |
11 | } |
12 | .first,.second{ |
13 | float:left; |
14 | height:100px; |
15 | width:100px; |
16 | border:1px solid blue |
17 | } |
18 | </ style > |
19 | </ head > |
20 | < body > |
21 | < div class = "parent" > |
22 | < div class = "first" ></ div > |
23 | < div class = "second" ></ div > |
24 | </ div > |
25 | </ body > |
26 | </ html > |
以上代码在IE6下可以撑开父div,但是在IE8或者FF浏览器下不能够被撑开。解决方法就是清除浮动。代码如下:
01 | <!DOCTYPE html> |
02 | < html > |
03 | < head > |
04 | < meta charset = " utf-8" > |
05 | < meta name = "author" content = "http://www.51texiao.cn/" /> |
06 | < title >蚂蚁部落</ title > |
07 | < style type = "text/css" > |
08 | .parent{ |
09 | border:1px solid red; |
10 | width:500px; |
11 | overflow:hidden |
12 | } |
13 | .first,.second{ |
14 | float:left; |
15 | height:100px; |
16 | width:100px; |
17 | border:1px solid blue |
18 | } |
19 | </ style > |
20 | </ head > |
21 | < body > |
22 | < div class = "parent" > |
23 | < div class = "first" ></ div > |
24 | < div class = "second" ></ div > |
25 | </ div > |
26 | </ body > |
27 | </ html > |
相关文章
最新发布
阅读排行
热门文章
猜你喜欢