浮动的元素在文档中是脱离正常文档流的位置问题
2008-11-20 09:24
302 查看
按照标准来解释,如果容器层没有浮动,而它的内部元素浮动的话,它是没有高度的,因为它内部元素脱离的文档流,所以容器层的高度是不会被撑开的。
如
<div id="content" style="border: solid 1px black">
<div id="subcontent" style="float:left;height:500px;width:500px;background:red;"> </div>
</div>
解决这种问题的办法:
1.可以在容器层的最后添加一个额外的清除层。即加入“<div style="clear:both"></div>”
<div id="content" style="border: solid 1px black">
<div id="subcontent" style="float:left;height:500px;width:500px;background:red;"> </div>
<div style="clear:both"></div>
</div>
2.让容器层也浮动
<div id="content" style="float:left;border: solid 1px black">
<div id="subcontent" style="float:left;height:500px;width:500px;background:red;"> </div>
</div>
如
<div id="content" style="border: solid 1px black">
<div id="subcontent" style="float:left;height:500px;width:500px;background:red;"> </div>
</div>
解决这种问题的办法:
1.可以在容器层的最后添加一个额外的清除层。即加入“<div style="clear:both"></div>”
<div id="content" style="border: solid 1px black">
<div id="subcontent" style="float:left;height:500px;width:500px;background:red;"> </div>
<div style="clear:both"></div>
</div>
2.让容器层也浮动
<div id="content" style="float:left;border: solid 1px black">
<div id="subcontent" style="float:left;height:500px;width:500px;background:red;"> </div>
</div>
相关文章推荐
- 正常文档流block、inline、inline-block元素与浮动框之间的位置关系
- css float(脱离正常流:向左/右浮动直到父元素/另一float, 不占空间)
- 正常流,dom树,css脱离文档流就不占据空间了吗?脱离文档流是不是指该元素从dom树中脱离?
- 元素脱离普通文档流后特点及问题总结
- CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- 浮动元素问题
- IE6/7下同级只有一个元素浮动,会换行问题
- 如何清除浮动元素对父元素高度的影响 & 如何解决外边距溢出问题
- CSS文档流与块级元素和内联元素(文档)
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
- JavaScript权威指南_137_第15章_脚本化文档_15.8-文档和元素的几何形状和滚动-关于元素尺寸、位置、溢出的更多信息
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- 关于子元素margin-top影响父元素位置问题
- li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
- cocos2d-x中ScrollView内的元素位置问题
- WebBrowser 中无法正常嵌入Office 文档的问题
- 解决浮动元素父容器高度自适应问题
- 8.脱离标准文档流(浮动/固定定位/绝对定位)
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别