方法一：

html：

<div id="all1">

<div id="left1">1</div>

<div id="left2">1</div>

<div style=" clear:both; "></div>

</div>

css：

#left1{ float:left;width:200px;}

#left2{ float:left;width:200px;}

#all1{}

这个方法的关键在于用了clear:both来清除了浮动元素，把父元素all1撑开。

方法二：

html：

<div class="aa">

  <div class="bb">sffsssssssssssss</div>

  <div class="cc">sffss</div>

</div>

css：

.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}

.bb { border:1px solid #f00; background:#999; float:left;}

.cc{ border:1px solid #f00; background:#999; float:left;}

此方法的重点在于，子元素有float之后，父元素需要设置一个overflow:hidden;，这样就可以自动撑开父元素aa。

特别注释：

overflow:hidden要有宽度或者高度才会溢出部分隐藏，如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开

总结如上的方法，各有适合的地方。比如overflow:hidden之后，超出父元素位置的子元素就看不到了，可以试一下如下的两段代码对比一下，

代码一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css" >

.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}

.bb { border:1px solid #f00; background:#999; float:left; margin-top:-10px;margin-left:110px;}

.cc{ border:1px solid #f00; background:#999; float:left;}

</style>

<body>

<div class="aa">

  <div class="bb">图片</div>

  <div class="cc">图片</div>

</div>

</body>

</html>

效果图：

代码二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css" >

.aa{ border:1px solid #000; background:#CC4;}

.bb { border:1px solid #f00; background:#999; float:left; margin-top:-10px;margin-left:110px;}

.cc{ border:1px solid #f00; background:#999; float:left;}

</style>

<body>

<div class="aa">

  <div class="bb">图片</div>

  <div class="cc">图片</div>

<div style="clear:both"></div>

</div>

</body>

</html>

效果图：

子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题的更多相关文章

  1. 子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度

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

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

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

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

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

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

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

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

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

  6. div标签清除float浮动样式方法

    方法一. 这个方法来源于positioniseverything ,通过after伪类实现,完全兼容当前主流浏览器. 1 <style type="text/css"> ...

  7. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

  8. 清除float浮动造成影响的几种解决方案

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  9. 归纳篇（一）CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

随机推荐

  1. 转Class.forName()用法详解

    主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就是说JVM会执行该类的静态代码段 ...

  2. two day python基础知识

    1.调用功能 ---- -在同一个目录下,调用用户名密码登陆模块 2.创建文件夹 import os #os模块 os.mkdir ("new_dd3")# 创建文件夹 三元 3. ...

  3. 每日一九度之 题目1033：继续xxx定律

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5502 解决:1351 题目描述:     当n为3时,我们在验证xxx定律的过程中会得到一个序列,3,5,8,4,2,1,将3称为关键数, ...

  4. ACM题目————STL练习之Ananagrams

    Description Most crossword puzzle fans are used to anagrams--groups of words with the same letters i ...

  5. （摘至）程序员老鸟写sql语句的经验之谈

    做管理系统的,无论是bs结构的还是cs结构的,都不可避免的涉及到数据库表结构的设计,sql语句的编写等.因此在开发系统的时候,表结构设计是否合理,sql语句是否标准,写出的sql性能是否优化往往会成为 ...

  6. Ajax中GET和POST的区别

    Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的 ...

  7. asp.net 页面跳转传值的几种方式

    参考地址: http://blog.csdn.net/zzzzzzzert/article/details/8486143 protected void Button1_Click(object se ...

  8. refresh的停车场 分类： 栈和队列 2015-06-18 17:13 26人阅读 评论(0) 收藏

    refresh的停车场 TimeLimit: 1000ms Memory limit: 65536K 题目描述 refresh最近发了一笔横财,开了一家停车场.由于土地有限,停车场内停车数量有限,但是 ...

  9. oracle中的自动增长

    create table test( id int not null primary key, name varchar2(20), sex int) ; create sequence t -> ...

  10. java中的动态代理机制

    java中的动态代理机制 在java的动态代理机制中,有两个重要的类或接口,一个是 InvocationHandler(Interface).另一个则是 Proxy(Class),这一个类和接口是实现 ...