编写HTML时发现,在Firefox等遵循W3C标准的浏览器中,若外层DIV包含设置了float样式的内层DIV,由于内部未进行clear处理,外层容器无法自动伸展以包裹浮动元素,从而导致布局异常。
1、 外部红色边框的DIV未被撑开,原因是内部的DIV设置了float:left,导致其脱离了标准文档流,失去了clear:both和display:block的特性,从而使父容器无法感知其高度,无法自动扩展。
2、 在容器DIV中,所有设置了float:left的子元素后面,添加一个样式为clear:both的DIV。这个额外的DIV起到了清除浮动的作用,确保父容器能够正确包含浮动元素,避免布局错乱,从而实现预期的显示效果。
3、 使用Dojo实现拖拽功能时,若被拖动的DIV是容器的直接子节点,移动该节点可能导致页面布局错乱,从而引发排版问题。
4、 当包含蓝色边框的DIV被移至另一DIV之后,由于设置了clear:both,该元素将被迫另起一行显示。
5、 调整HTML结构,使外层DIV容器应用指定的CSS样式。
6、 HTML4严格模式代码规范
评论
更多评论