下次自动登录
现在的位置:
& 综合 & 正文
子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
&div id="all1"&
&div id="left1"&1&/div&
&div id="left2"&1&/div&
&div style=" clear: "&&/div&
#left1{ float:width:200}
#left2{ float:width:200}
这个方法的关键在于用了clear:both来清除了浮动元素，把父元素all1撑开。方法二：html：
&div class="aa"&
&div class="bb"&sffsssssssssssss&/div&
&div class="cc"&sffss&/div&
.aa{ border:1px solid #000; background:#CC4;overflow:}
.bb { border:1px solid #f00; background:#999; float:}
.cc{ border:1px solid #f00; background:#999; float:}
此方法的重点在于，子元素有float之后，父元素需要设置一个overflow:，这样就可以自动撑开父元素aa。
特别注释：
overflow:hidden要有宽度或者高度才会溢出部分隐藏，如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开
总结如上的方法，各有适合的地方。比如overflow:hidden之后，超出父元素位置的子元素就看不到了，可以试一下如下的两段对比一下，
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
&style type="text/css" &
.aa{ border:1px solid #000; background:#CC4;overflow:}
.bb { border:1px solid #f00; background:#999; float: margin-top:-10margin-left:110}
.cc{ border:1px solid #f00; background:#999; float:}
&div class="aa"&
&div class="bb"&图片&/div&
&div class="cc"&图片&/div&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
&style type="text/css" &
.aa{ border:1px solid #000; background:#CC4;}
.bb { border:1px solid #f00; background:#999; float: margin-top:-10margin-left:110}
.cc{ border:1px solid #f00; background:#999; float:}
&div class="aa"&
&div class="bb"&图片&/div&
&div class="cc"&图片&/div&
&div style="clear:both"&&/div&
&&&&推荐文章:
【上篇】【下篇】> IE6/7 and IE8/9/10(IE7方式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素，子元素依然能显示bug
IE6/7 and IE8/9/10(IE7方式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素，子元素依然能显示bug
sowei01 & &
发布时间： & &
浏览：12 & &
回复：0 & &
悬赏：0.0希赛币
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素，子元素依然能显示bug
　　多数情况下隐藏(设置display:none)一个元素，无需依次将其内的所有子元素都隐藏。非要这么做，有时会碰到意想不到的bug。如下
　　1，两个div，d1中包含d2
　　2，d1，d2都设置了absolute或relative
　　3，隐藏d1
　　4，隐藏子元素d2
　　5，显示d1
　　这时IE6/7 and IE8/9/10(IE7模式)中会发现，子元素d2也能显示出了(别忘了，d2被display:none 了哦)。但IE8/9/10/Firefox5/Safari4/Chrome12中子元素d2仍然是被隐藏的。
　　重现代码
　　&!DOCTYPE HTML&
&meta charset="utf-8" /&
&title&IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素，子元素依然能显示bug&/title&
&button onclick="hidden_d1()"&1) 隐藏div[id=d1]&/button&
&button onclick="hidden_d2()"&2) 隐藏div[id=d2]&/button&
&button onclick="display_d1()"&3) 显示div[id=d1]&/button&
&div id="d1" &
&div id="d2" $>$/div&
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
function hidden_d1() {
d1.style.display = "none";
function hidden_d2() {
d2.style.display = "none";
function display_d1() {
d1.style.display = "block";
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&