子级对象使用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没高度不能自适应高度的更多相关文章

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

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

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

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  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. 子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度

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

  8. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  9. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

随机推荐

  1. python发送QQ邮箱方法

    import smtplib from email.mime.text import MIMEText mail_user = "user1@qq.com" mail_pwd = ...

  2. Linux平台Boost的编译方法

    本博客(http://blog.csdn.net/livelylittlefish)贴出作 者(三二一@小鱼)相关研究.学习内容所做的笔记,欢迎广大朋友指正! Linux平台Boost的编译方法 Bo ...

  3. Android WiFi热点7.1以上版本适配

    代码地址如下:http://www.demodashi.com/demo/13907.html 一.准备工作 开发环境:  jdk1.8  AS(3.0.1) 运行环境:  华为V10(Android ...

  4. 【费用流】【网络流24题】【cogs 739】运输问题

    739. [网络流24题] 运输问题 ★★ 输入文件:tran.in 输出文件:tran.out 简单对照 时间限制:1 s 内存限制:128 MB «问题描写叙述: «编程任务: 对于给定的m 个仓 ...

  5. Hadoop集群+Spark集群搭建（一篇文章就够了）

    本文档环境基于ubuntu16.04版本,(转发请注明出处:http://www.cnblogs.com/zhangyongli2011/ 如发现有错,请留言,谢谢) 一.准备 1.1 软件版本 Ub ...

  6. 安卓入门 使用android创建一个项目 从启动activity中响应按钮事件 启动另一个activity 并传递参数

    启动android studio创建一个新项目 public void sendMessage(View view){ Intent intent=new Intent(this,DispalyMes ...

  7. cocos2dx 关于lua 绑定的环境配置官方文档翻译与 将自己定义c++方法绑定到lua的的方法

    网上有好多写如何讲自己定义的方法绑定到lua的文章,当中都仅仅对环境配置做了简单的介绍,看到有的帖子写在绑定中遇到了各种各样的error.大部分是因为环境配置不对导致的,下面是官方的文档有标准的说明, ...

  8. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. 连载：面向对象葵花宝典：思想、技巧与实践（35） - NOP原则

    NOP.No Overdesign Priciple.不要过度设计原则. 这应该是你第一次看到这个原则.而且你也不用上网查了,由于这个不是大师们创造的,而是我创造的:) 之所以提出这个原则,是我自己吃 ...

  10. spring boot test中mockito的运用

    mock的意义 在微服务盛行的当下,开发过程中往往出现A应用中某功能的实现需要调用B应用的接口,无论使用RPC还是restful都需要B应用提供接口的实现整个开发工作才能继续进行.从而导致A应用的开发 ...