如何处理子div设置float后会导致父div无法自动撑开的问题
发表时间:2023-09-07 来源:明辉站整理相关软件相关文章人气:
[摘要]本篇文章分享给大家的内容是关于子div设置float后会导致父div无法自动撑开,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到大家。原因:内部的p因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的p不会被撑开。以下是几种解决办法(假...
本篇文章分享给大家的内容是关于子div设置float后会导致父div无法自动撑开,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到大家。
原因:内部的p因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的p不会被撑开。
以下是几种解决办法(假设父p的class为“container”):
container::after{
display: block;
height:0;
content: '';
clear: both;
}
container{
display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
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无法自动撑开的问题的详细内容,更多请关注php中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。