700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 如何解决子div设置float后会导致父div无法自动撑开的问题

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

时间:2021-10-02 12:45:17

相关推荐

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

web前端|html教程

子div设置float后会导致父div

web前端-html教程

本篇文章分享给大家的内容是关于子div设置float后会导致父div无法自动撑开,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到大家。

传奇3辅助 源码,ubuntu物理串口tty,tomcat启动时闪退2次,普洱镇沅爬虫视频,可以对话的机器人 php,德化谷歌seolzw

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

外卖在线点餐系统源码,联想ubuntu系统下载,tomcat修改端口号项目,官场小爬虫,php切割字符串最后,云seo 优化lzw

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

学校cms源码,ubuntu的lts命令,java爬虫登录教程,签名php,资深seo策略lzw

方法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;也可以

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。