子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级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前加一个clear清除浮动对象</div>
</div>
</body>
</html>
子级用css float浮动 而父级div没高度不能自适应高度的更多相关文章
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- 解决子元素用css float浮动后父级元素高度自适应高度
1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...
- div高度不能自适应(子级使用float浮动,父级div高度不能自适应)
1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...
- CSS清除浮动使父级元素展开的三个方法
点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...
- 子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度
方法一:对父级设置固定高度 假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果. 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度.此方法 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- float浮动导致父元素高度坍塌的原因及清除浮动方法
一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...
随机推荐
- js dom获取
let inputs = this.$el.querySelectorAll('input'); let icon = this.$el.querySelector('.el-input__icon' ...
- (转)android适配各种分辨率的问题
Android设备屏幕的尺寸是各式各样的,如小米是4英寸的,Xoom平板是10英寸:分辨率也千奇百怪,800×480,960×540等:Android版本的碎片化问题更是萦绕于心,不过在设计应用时可以 ...
- 【Linux】cp命令
用途 cp除了复制功能之外还可以建立快捷方式 全称 cp的全称为copy 参数 -a :相当于同时指定参数pdr -d :若文件为链接文件的属性(link file),则复制链接文件属性而非档案本身 ...
- 分享阿里云SLB-负载均衡的实现基本原理架构
负载均衡技术原理浅析 https://help.aliyun.com/knowledge_detail/39444.html?spm=5176.7839438.2.6.XBbX5l 阿里定制版的LVC ...
- 【微信小程序】request请求POST提交数据,记得要加上header
wx.request({ url: '*******', data: { "type":"nearest_village", "district&qu ...
- spring.xml从外部文件引入数据库配置信息
<!-- 分散配置 --> <context:property-placeholder location="classpath:jdbc.properties" ...
- quartz cron表达式在线生成
近期使用了quartz定时器,有感于起cron表达式有点复杂.且无法实时推断定时时间是否正确,因此写了个在线表达式及依据表达式获得前10次运行时间. 訪问地址例如以下:http://cron.g2ro ...
- SpringCloud-服务注册与发现
这里我们会用到Spring Cloud Netflix,该项目是Spring Cloud的子项目之一,主要内容是对Netflix公司一系列开源产品的包装,它为Spring Boot应用提供了自配置的N ...
- shell脚本中执行mysql命令
1.mysql -hhostname -uuser -ppsword -e "mysql_cmd" 2. mysql -hhostname -uuser -ppsword < ...
- MFS排错
[root@Nginx_Master mfs]# /app/server/mfs/sbin/mfsmaster start working directory: /app/server/mfs/var ...