HTML中子div设置float后会导致父div无法自动撑开怎么办
这篇文章给大家分享的是有关HTML中子div设置float后会导致父div无法自动撑开怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
成都创新互联提供成都网站设计、网站制作、网页设计,品牌网站制作,广告投放等致力于企业网站建设与公司网站制作,10年的网站开发和建站经验,助力企业信息化建设,成功案例突破上千,是您实现网站建设的好选择.
原因:内部的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无法自动撑开怎么办就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网页名称:HTML中子div设置float后会导致父div无法自动撑开怎么办
新闻来源:http://scyanting.com/article/gpgddg.html