子div撑不开父div的几种解决方法
子div撑不开父div的情况:
<style> .example{ background: #008000; width: 400px; margin: 10px; padding: 10px; } .example .childrenDiv{ float: left; height: 100px; width: 100px; word-break: break-all; word-wrap: break-word; } </style> <!--示例--> <div class="example"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果:
解决方法:
(一):加<div style="clear:both;"></div>
代码实例:
<!--方法一--> <div class="example"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> <!--解决方法--> <div style="clear: both;"></div> </div>
显示结果:
分析:
父div作为外部容器,子div设置了float样式,则外部容器div因为内部没有clear导致不能被撑开,即内部div因为float:left之后,就丢失了clear:both和display:block的样式。
(二):通过伪元素将父容器撑开
代码实例:
<style> .clearfix:after{ content:"."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ *html.clearfix{height: 1%;} /*end hide from IE-mac*/ </style> <!--方法二--> <div class="clearfix example"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果:
分析:
1.不建议采用第一种方法,首先,代码中多了一个没有意义的div;其次,在用dojo做Drag&Drop的时候,由于这个div是父容器div的一个子节点,如果这个节点被移动,则会造成排版上的错误,而且如果要将子div移动到这个div之后,则会因为clear:both被强制换行显示。
2.方法二原理:after伪对象将在应用clearfix的元素的结尾添加content中的内容,在这里添加了一个“.”,并且把它的display设置成了block,高度设为0,clear设为both,visibility设为隐藏,即撑开容器。
3.因为windows IE不支持上述做法,所以要在IE上也完美显示,则必须在clearfix的css定义的后面加一些专门为IE设定的hack,即:
/* Hides from IE-mac \*/ *html.clearfix{height: 1%;} /*end hide from IE-mac*/
因为转移符“\”,Mac IE浏览器会忽略掉这段hack,但window IE不会,它会应用*html.clearfix{height:1%;}来达到撑开div容器的目的(貌似Mac IE没有办法解决这个问题,不顾用户数量太少,Safari支持就可以了O(∩_∩)O哈哈~)。
(三)父容器增加一个属性:overflow:hidden
代码实例:
<!--方法三--> <div class="example" style="overflow: hidden;"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果:
(四)父容器增加一个属性:display:table
代码实例:
<!--方法四--> <div class="example" style="display: table;"> <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div> <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div> </div>
显示结果: