如何解决子div设置float后会导致父div无法自动撑开的问题

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何解决子div设置float后会导致父div无法自动撑开的问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1360字，纯文字阅读大概需要2分钟。

内容图文

原因：内部的p因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的p不会被撑开。

以下是几种解决办法（假设父p的class为“container”）:

• 方法1、使用伪类

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法，底下会有部分被遮到，所以添加这行，就完美了*/
}

• 方法2、不撑开的原理是overflow不可见，所以给父p添加overflow:auto;就行，IE要用_height:1%;

container{
    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏，但是底下会被遮到一点，不完美*/
     _height:1%;/*对IE的hack*/
}

• 方法3、可以专门最后添加一个子p用来清除浮动：<p class="clear"></p>
  设置样式.clear{clear:both; font-size:0; height:1%;}

• 方法4、可以设置父p的高度（也就是手动撑开，不灵活）；

• 方法5、直接给父p设置 display: inline-block; 这样也自动撑开

• 方法6、直接给子p设置 display: inline-block; 也能自动撑开，但是排版问题有待研究学习

• 方法7、从网上还发现了一种方法，给父p增加属性：display:table;

• 方法8、 子p浮动我就套不住你?OK,我让父p也浮动: 父p设置 float: left; 也可以

相关推荐：

tinymce与prism实现高亮的代码以及汉化的配置方法过程

如何动态生成html元素以及为元素追加属性的方法介绍（附代码）

以上就是如何解决子div设置float后会导致父div无法自动撑开的问题的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的如何解决子div设置float后会导致父div无法自动撑开的问题全部内容，希望文章能够帮你解决如何解决子div设置float后会导致父div无法自动撑开的问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端