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


本文摘自PHP中文网,作者不言,侵删。

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

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

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

  • 方法1、使用伪类

1

2

3

4

5

6

7

8

9

container::after{

    display: block;

    height:0;

    content: '';

    clear: both;

}

container{

    display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/

}

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

1

2

3

4

5

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无法自动撑开的问题的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

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

更多相关阅读请进入《子div设置float后会导致父div》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...