2.内层元素设置浮动，外层元素不设置浮动和高度，内层元素不能撑开外层元素高度问题...

最新推荐文章于 2022-12-13 15:35:06 发布

weixin_30319097

最新推荐文章于 2022-12-13 15:35:06 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/stone5/p/8997468.html

<style>

.par { border: 5px solid #fcc; width: 300px; /*height:110px; 注意这里给外层元素设置相应高度，外层元素会包裹内层元素，并占用文档流*/ /*float:left; 或者给外层元素设置浮动，外层元素也会包裹内层元素，但不会占用文档流空间*/ } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>

---上边代码显示页面（内层元素不能撑开外部元素）

---上边给出了2种解决方案，第一种方案，外层元素设置高度，写死了，如果内部元素高度发生变化，外层层元素写死了，不太好。第二种解决方案，会脱离文档流也不太好。最好的解决方案（为外层元素加overflow属性）：.par { overflow: hidden; } //清除内部浮动，外层元素par在计算高度时，par内部的浮动元素child也会参与计算。