首页 > HTML/CSS

为什么父div没有被撑开

发表于2015-07-25 18:44:53| 835次阅读| 来源webkfa| 作者html,css

摘要:为什么父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>

相关文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1