html div自动撑起来,HTML中子div设置float后会导致父div无法自动撑开怎么办

HTML中子div设置float后会导致父div无法自动撑开怎么办

发布时间：2020-09-15 13:47:49

来源：亿速云

阅读：53

作者：小新

这篇文章给大家分享的是有关HTML中子div设置float后会导致父div无法自动撑开怎么办的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

原因：内部的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用来清除浮动：

设置样式.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; 也可以

感谢各位的阅读！关于HTML中子div设置float后会导致父div无法自动撑开怎么办就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！