方法一:对父级设置固定高度

假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果。

此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度。此方法针对能确定父div内的内容高度情况下使用。

方法二:使用css clear清除浮动

在父级div标签闭合</div>前加一个clear清除浮动对象。

此方法需要注意是clear:both加的位置,不是对父级直接加clear样式,而是在父级</div>前加带clear对象盒子。

方法三:对父级样式加overflow样式

此方法非常简单,也可以作为推荐解决父级不能被撑开自适应高度的方法,可以不增加div盒子对象,只需要对父级加一个overflow:hidden样式即可。

子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的更多相关文章

  1. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  2. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  4. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  5. 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  6. css float 浮动是个混球

    得说,在学习 CSS 的时候就一直在疑惑,横排布局干嘛要用 float 这种属性, 用了还会高度塌陷,怎么不发明些高级点的属性来完成横排布局呢, 甚至所有人都告诉我摒弃表格布局,浮动布局才是 DIV+ ...

  7. css - float浮动模块的高度问题 解决方案

    当一个Div中的子元素都是浮动元素时,该div是没有高度的.通常会带来很多困扰,解决方案如下: 低版本统配兼容: overflow: hidden; 下面是不支持低配浏览器,而且似乎该效果对 P 标签 ...

  8. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  9. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

随机推荐

  1. 干货:Vue粒子特效(vue-particles插件)

    转:https://www.jianshu.com/p/53199b842d25 image.png 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事 ...

  2. Django-CRM项目学习(二)-模仿admin实现stark

    开始今日份整理 1.stark模块基本操作 1.1 stark模块的启动 保证django自动的加载每一个app下的stark.py文件 创建django项目,创建stark项目,start app ...

  3. 27 python 初学(信号量、条件变量、同步条件、队列)

    参考博客: www.cnblogs.com/yuanchenqi/articles/5733873.html  semaphore 信号量: condition 条件变量: event 同步条件:条件 ...

  4. CGPoint、CGSize、CGRect、CGRectEdge的详细使用

    http://blog.sina.com.cn/s/blog_953e22700101r7lz.html 在CGGeometry.h里的 CGPoint.CGSize.CGRect.CGRectEdg ...

  5. Jmeter录制手机app脚本

    转:http://www.cnblogs.com/yangxia-test/p/5484616.html   环境准备: 1.手机 2.wifi 3.Jmeter   具体步骤: 1.启动Jmeter ...

  6. Linux 默认连接数

    Linux 默认连接数 - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=Linux+%E9%BB%98%E8%AE ...

  7. PowerShell-自定义函数(五)-参数互斥:ParameterSetName

    转自:https://blog.51cto.com/38088444/1920978 这一篇我们来讲一下参数的互斥,何谓参数互斥呢.用九胖风格的话说就是互怼,有我没你,有你没我. 例如我们为一个Pin ...

  8. 第七章· Redis Cluster 核心技术

    Redis Cluster 分布式集群 Redis Cluster 安装部署 Redis Cluster 集群管理操作(核心)

  9. 解决PHP乱码

    如果你的PHP页面出现了乱码,之需要在页面的开始处加入下面代码就可以了. <?php header("content-type:text/html;charset=utf-8" ...

  10. 数据分析之Matplotlib和机器学习基础

    一.Matplotlib基础知识 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形. 通过 Matplotlib,开发者可以仅需 ...