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

当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。

如何解决父div对象自适应高度,方法有三种。

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

此方法可用于能确定父级div内子级对象高度。

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

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

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

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

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

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

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

推荐。此方法为非常简单解决子用float,父div不能自适应高度,不能随父内容多少而自适应高度没有高度。

子级用css float浮动 而父级不能自适应高度解决方法的更多相关文章

  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浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  5. div高度不能自适应(子级使用float浮动,父级div高度不能自适应)

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

  6. CSS清除浮动使父级元素展开的三个方法

    点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...

  7. CSS设置浮动导致背景颜色设置无效的解决方法

    float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...

  8. CSS布局自适应高度解决方法

    这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏 ...

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

    方法一:对父级设置固定高度 假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果. 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度.此方法 ...

随机推荐

  1. jxl操作excel单个单元格换行和获取换行

    excel中同表格换行: a+"\n"+b 1.读取 String str = sheet.getCell(c, r).getContents(); String[] split ...

  2. 对cookie,session,token,jwt的理解

    对这几个东西有点凌乱了,今天有时间整理下 cookie Cookie的诞生 由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的.Cookie诞生的最初目的是为了存储web中的状态信息,以方便 ...

  3. Linx 的组管理和权限管理

    Linux组基本介绍 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件 有所有者.所在组.其它组的概念. 1) 所有者 2) 所在组 3) 其它组 4) 改变用户所在的组 ...

  4. spring IOC的实现原理

    姓名:陈中娇     班级:软件151 1. IOC容器就是具有依赖注入功能的容器,IOC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应 ...

  5. 【医学影像】《Identifying Medical Diagnoses and Treatable Diseases by Image-Based Deep Learning》论文笔记

    这篇论文的作者是张康教授为首的团队,联合国内外众多医院及科研机构,合力完成,最后发表在cell上,实至名归. 从方法的角度上来说,与上一篇博客中的论文很相似,采用的都是InceptionV3模型,同时 ...

  6. Eureka 高可用 - 踩坑回忆

    1.application.yml中eureka配置更改 ## Eurake 公用配置 ## 向其他注册中心注册 eureka.client.register-with-eureka=true ## ...

  7. 红米手机3S 3X简单卡刷开发版获得ROOT权限的方法

    小米的机器不同手机型号一般小米论坛都提供两个不同的系统,即分别是稳定版和开发版,稳定版没有提供root权限管理,开发版中就支持了root权限,很多情况下我们需要使用的一些功能强大的APP,都需要在ro ...

  8. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  9. python+unittest+requests实现接口自动化

    前言: Requests简介 Requests 是使用 Apache2 Licensed 许可证的 HTTP 库.用 Python 编写,真正的为人类着想. Python 标准库中的 urllib2  ...

  10. Zookeeper概念学习系列之paxos协议

    不多说,直接上干货! 前言 一种最终一致的算法,paxos算法. paxos算法是由大牛lamport发明的,关于paxos算法有很多趣事.比如lamport论文最初由故事描述来引入算法,以至于那班习 ...