div元素无法浮动从而撑开父级元素,当定义父级宽度足够时里面的元素才能够浮动显示

如何解决不用定义父级宽度,里面的子元素可以浮动并且自动撑开父级框

1.父级div也设置浮动
<div style="float:left;">
<div></div>
<div></div>
</div>

2.在最后一个浮动的子div后面加上一个空的div,并给这个div设置clear:both;

<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"></div>
</div>

其实这是一个关于如何清除浮动的问题,楼主想进一步了解可以去网上搜下对应资料,还有一些其他的办法
温馨提示:内容为网友见解,仅供参考
第1个回答  2013-01-25
不定义父级宽度和高度,子元素也是可以浮动的,只不过父元素没法撑开,给父元素添加overflow:hidden可以清除浮动本回答被网友采纳
第2个回答  2013-01-24
给一个清除浮动看一下是不是可以解决问题

CSS中为什么overflow:hidden能清楚浮动float的影响
1、有宽度高度值,显示为溢出 2、无宽度高度值,就会被撑开(因为没有分离父子),加了”float:left;“ 浮动分离了父子元素,而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果,所以不撑开,反而父块的高度塌陷消失 不是高手初学者...望指正 hight因为固定了高度撑不开 用m...

什么情况父div会被子div撑大 div没有被dl里的dd撑大,只能被内联撑大吗...
\/\/这种情况是在没有box-sizing:border-box的情况下,div将会在原有的基础上撑开2 * 10 px ,撑开父级,如果这个div是body子元素,那么你会看到水平有滚动条;2.什么情况下不会撑大包括浮动?定死宽度(我们说的都是水平方向,垂直也是一样的道理),无论连的内容多大他的宽度都不会变化,你可以...

浮动的父元素内有一个绝对定位的div,该div宽度不能自适应内容,而是受到...
absolute会导致父元素的边界崩塌,也就是你这种宽度不受父元素限制。最方便的解决方法就是overflow:hidden

div中使h和form分别浮动在两边了,但是给div设置的背景颜色怎么显示不...
老哥,浮动元素是脱离文档流的,不会把父元素撑起来,所以div的高度为0,背影颜色自然就显示不出来了,解决办法就是清除浮动了。将浮动元素的父元素添加伪元素清除。例:你的.head就是该浮动元素的父元素,所以 .head:after{content:"";display:table;clear:both;line-height:0};.head{zoom:1} 或者...

CSS 子元素宽度变宽时,如何撑开父元素?
希望子元素撑开父级元素可以使用以下两种方法:1、父级版元素宽度不固定,父级元素设置为inline-block或者添加float;2、对父级元素使用min-width,这样只限制了最小的宽度,如果子元素变宽,父级同样会变宽。3、首先父类元素必须不是相对定位,如果是相对定位宽度就会默认为百分百。所以必须是绝对定位...

...父DIV设置了position:relative的时候,子DIV如何能把父DIV撑开...
1、作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。2、在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"><\/div> 。3、在用dojo做...

如何撑开父元素,让父元素div自动适应高度的问题
5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行getfu()函数。6、在js标签中,创建getfu()函数,在函数内,通过id(box)获得span对象,通过连续使用parent()获得span标签的父级的父级元素对象,再使用prop()方法获得该对象名称。最后,使用alert()方法输出元素名称。

div定义了宽度之后就不再继承父级宽度
div默认是块级元素,默认会继承父元素的宽度。根据查询相关公开信息显示,当div设置了绝对定位,,那么它的宽度则是由它的内容来决定的,其他情况下,默认会继承父元素的宽度。DIV是层叠样式表中的定位技术,全称DIVision,即为划分,有时可以称其为图层。

浮动塌陷
但是当子元素设置浮动之后,子元素就会完全脱离文档流,父元素还在文档流中,此时父元素的高度就没有子元素撑起(子元素无法撑起父元素的高度),从而导致父元素的高度塌陷。简单来说,就是包含含有浮动的元素的上一级的高度变为0了,下面的元素会上去,这样会导致页面布局混乱。1、父元素结束之前添加一...

div盒子浮动不在一行的问题
并为其设置clear属性,以清除前面的浮动效果。2、使用overflow属性:为父元素设置overflow属性,如overflow:auto或overflow:hidden,可以解决子元素浮动时导致的父元素高度塌陷问题。3、使用clearfix方法:在父元素的CSS样式中添加clearfix属性,可以解决子元素浮动时导致的父元素高度塌陷问题。

相似回答