AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2017-11-15 1007
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
给父级div添加 overflow: hidden; 









本文转自 yntmdr 51CTO博客，原文链接：http://blog.51cto.com/yntmdr/1944857，如需转载请自行联系原作者
文章标签：
前端开发
关键词：
CSS浮动
CSS float
CSS float浮动
CSS自适应
CSS div
余二五
目录
相关文章
凉凉心.
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
position定位（核心） 我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。 三大属性：position属性，display属性，float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法，可以实现多栏布局，导航菜单等等。 position属性是干嘛用的？怎么用？有哪些属性值？ position属性控制页面上元素间的位置关系，也就是排版。 怎么用？要知道怎么用
凉凉心.
452 1
34789737
|
6月前
|
前端开发
文字显示在div 最下面，css怎么写
文字显示在div 最下面，css怎么写
34789737
470 0
卓伊凡
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
636 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
|
12月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
407 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
疯狂的猿
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码，当鼠标经过404数字时，该数字会发光发亮，本段代码适应于所有网站使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
疯狂的猿
141 1
雨溪-yuxi
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性，包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流，向左或右排列，周围元素随之调整。文章还详细讲解了清除浮动的方法，如使用clear属性、设置父元素高度、利用overflow属性、伪元素等，以解决因浮动导致的布局问题。最后，强调了浮动在创建复杂布局时的作用，并预告后续内容。
雨溪-yuxi
361 2
游客vx6uejvd6s6ck
|
7月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
这是一款纯前端实现的多平台虚拟评论生成器，支持抖音、快手、小红书风格，适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局，利用IndexedDB存储数据，CSS Variables切换主题。
游客vx6uejvd6s6ck
1141 2
游客vx6uejvd6s6ck
|
7月前
|
存储 前端开发 安全
病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器，旨在为医学教学和软件开发测试提供数据支持，严格遵守《医疗机构病历管理规定》。
游客vx6uejvd6s6ck
3426 5
游客ib7xsk7hcucuo
|
7月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
2567 4
游客vx6uejvd6s6ck
|
7月前
|
前端开发 容器
处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
这是一个电子处方模拟生成系统，使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识，并明确标注为模拟数据，仅供学习
游客vx6uejvd6s6ck
1621 1

热门文章

最新文章

  • 1
    MySQL数字类型int与tinyint、float与decimal如何选择
  • 2
    SQL Server的小数数值类型（float 和 decimal）用法
  • 3
    【小思考】Python的float转换精度损失所想到的
  • 4
    Java语言之float、double内存存储方式
  • 5
    float数据类型研究，发现其能显示的有效数字极为有限
  • 6
    char型int型float型double型数组在内存中所占的字节数（16位、32位、64位PC机）
  • 7
    float定位
  • 8
    用 float 存储金额，老板说损失从工资里扣！
  • 9
    c++ float 带 e 的指数
  • 10
    成功解决ValueError: min_samples_split must be an integer greater than 1 or a float in (0.0, 1.0]; got th
  • 1
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    2567
  • 2
    个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
    766
  • 3
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
    1456
  • 4
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
    1877
  • 5
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
    3886
  • 6
    制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
    764
  • 7
    医院检查单子p图软件，在线制作仿真病历，js+css+html装逼神器
    936
  • 8
    处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
    1621
  • 9
    病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
    3426
  • 10
    抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
    1141

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    附部署代码｜云数据库RDS 全托管 Supabase服务：小白轻松搞定开发AI应用