首页 > 其他分享 >解决子级用css float浮动 而父级div没高度不能自适应高度

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

时间:2023-04-16 22:37:29浏览次数:42  
标签:divcss5 父级 高度 float 100px div


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

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

如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍。

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

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

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

1、完整div+css实例html代码(对父div加高度):

 

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>父div不自适应高度实例</title> 
<style> 
.divcss5{width:500px;border:1px solid #000;padding:10px; height:100px} 
.divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
</style> 
</head> 
<body> 
<div class="divcss5"> 
<div class="divcss5-lf"></div> 
<div class="divcss5-rt"></div> 
</div> 
</body> 
</html>

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


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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>父div不自适应高度实例</title> 
<style> 
.divcss5{width:500px;border:1px solid #000;padding:10px} 
.divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
.clear{ clear:both} 
</style> 
</head> 
<body> 
<div class="divcss5"> 
<div class="divcss5-lf"></div> 
<div class="divcss5-rt"></div> 
<div class="clear"></div> 
</div> 
</body> 
</html>

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

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

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>父div不自适应高度实例</title> 
<style> 
.divcss5{width:500px;border:1px solid #000;padding:10px; overflow:hidden } 
.divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
</style> 
</head> 
<body> 
<div class="divcss5"> 
<div class="divcss5-lf"></div> 
<div class="divcss5-rt"></div> 
</div> 
</body> 
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

标签:divcss5,父级,高度,float,100px,div
From: https://blog.51cto.com/u_16071779/6193806

相关文章

  • 输入五个int型和五个float型求两个max(数组和重载函数)
    利用数组和函数重载求5个数最大值(分别考虑整数、单精度的情况)。输入格式:分别输入5个int型整数、5个float型实数。输出格式:分别输出5个int型整数的最大值、5个float型实数的最大值。输入样例:在这里给出一组输入。例如:1122666445511.1122.2233.33888.8855.55......
  • Flex| 流式 布局 ,让元素两端居左,居右,别再用float:right了
    主要代码是.parent{ justify-content:space-between; }}完整代码案例.tasklist{height:calc(80vh);overflow-y:auto;overflow-x:hidden;border:1pxsolid#ccc;border-radius:4px;}.taskhead{display:flex;height:50px;......
  • 绝对定位——父级无定位
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib......
  • 房子的高度
    一、问题描述:求房子的高度二、设计思路:1、声明变量2、输入地球的半径和房顶到太平洋的距离3、计算房子的高度4、输出房子的高度三、流程图: 四、代码实现:#include<iostream>#include<math.h>usingnamespacestd;intmain(){intr,d,high;cin>>r>>d;high=sqrt......
  • 网页下滑超过一定高度时添加类名(以顶部导航为例)
    //html部分<headerclass="header"><divclass="containerall_top_navclearfixcontentAll"><divclass="flleft"><ahref="javascript:void(0)"><img......
  • 点击子级影响父级点击事件的解决办法
    我要做的一个功能,点击选中一个配料,然后可以加减配料单数量,如图  为了避免点击加减的时候取消选中,给子级的点击事件这样写 @click.native.stop="",父级正常写就好 然后就可以实现各不干扰的点击事件了 ......
  • 变量类型【int/float/str】+占位符使用
    变量类型:int:整形float:浮点数str:字符串占位符:%s,占位字符串%d,占位整形%f,占位浮点数%.2f,保留2位小数占位-f表达式-format#变量+占位符的使用name="AAA"age=8weight=89.7550#占位符使用print("我叫%s,今年%d岁了,体重%.2f斤"%(name,age,weight))#格......
  • 类型类Type classes(第一部分)类约束 Eq、Ord、Show、Read、Enum、Num、Integral、Float
    类型类Typeclasses是一种定义某种行为的接口。如果类型是类型类的成员,则意味着类型支持并实现了类型类定义的行为。类约束==函数的类型,如下:type(==)(==)::Eqa=>a->a->Bool=>符号定义了一个类约束,==函数接受两个相同类型的形参,并返回Bool类型。这两个形参的类型......
  • 《Mysql基础》【Mysql小数浮点数】double float decimal数据类型 编程入门 学习分享
    -- --mysql数据库程序设计笔记:-------------小数测试--------------------double浮点小数(最多小数位后15位,)使用8个字节存储。--float单精度小数:(最多小数位后6位)使用4个字节存储。--举例保留2位:float(18,2),或:double(20,2)--decimal(最多小数位后30位)(存储空间更优,更小,......
  • html a标签怎样设置宽高,a标签如何设置高度和宽度
    https://blog.csdn.net/weixin_30344519/article/details/117859933https://www.yzktw.com.cn/post/14740.htmlstyle="font-size:15px;"我们直接设置html代码中的a标签高度和宽度是不会起作用的,这是因为a标签属于内联元素标签,而内联元素不支持设置宽度(width)和高度(height),那......