解决子级对象使用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. classnofoundexception:org.springframework.ui.freemarker.FreeMarkerConfigurationFactory

    这个是在整合freemarker的时候出现的问题,在添加依赖spring-context-support.jar之后就好了 但是我在搭建框架的时候出现的问题是明明添加了这个依赖,但是出现一个问题 出现 ...

  2. 二叉树的遍历python 代码

    __author__ = "WSX" class Node: def __init__(self, val = None, left = None, right = None): ...

  3. leetcode-824-Goat Latin(字符串的处理)

    题目描述: A sentence S is given, composed of words separated by spaces. Each word consists of lowercase ...

  4. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  5. 百度地图 Infowidow 内容(content 下标签) 点击事件

    需要监听 infowindow 的打开事件 ,查看InfoWindow API  实现 html 点击效果 代码 var infoWindow = that.createDangerInfoWindo ...

  6. Linux命令-关机命令:shutdown

    shutdown -h now 现在马上关机 shutdown -h : 晚上8:30定时关机shutdown -r now 现在马上重起shutdown -r 20:30 晚上8:30定时重起 ca ...

  7. 搭建maven环境——nexus

    第一步:部署maven环境和jdk环境 jdk直接用openjdk1. :yum -y install java--openjdk maven环境 wget http://mirror.rise.ph ...

  8. 吴裕雄 python 机器学习——聚类

    import numpy as np import matplotlib.pyplot as plt from sklearn.datasets.samples_generator import ma ...

  9. Git sparse-checkout 检出指定目录或文件

    根据网上资料整理而来,git 1.7版本后支持的sparse checkout特性,可以指定需要checkout的目录或者文件. # 设置允许git克隆子目录 git config core.spar ...

  10. /data/tomcat8/bin/setenv.sh

    --问题 Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=512m; support was remove ...