方法一：

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. java面试每日一题8

    题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153=1 ...

  2. android 数据库操作详解

    请看郭大神的八篇专栏,包含sql语句  android封装的databasehelper 和郭大神自己的LitePal  三种使用详解 http://blog.csdn.net/column/deta ...

  3. [HTML]js实现页面跳转,页面A跳到另一个页面B.以及页面传值(中文)

    要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html)<script language="javascri ...

  4. android异步加载图片并缓存到本地实现方法

    图片过多造成内存溢出,这个是最不容易解决的,要想一些好的缓存策略,比如大图片使用LRU缓存策略或懒加载缓存策略.今天首先介绍一下本地缓存图片     在android项目中访问网络图片是非常普遍性的事 ...

  5. Cube Stacking

    Cube Stacking Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 21350 Accepted: 7470 Case T ...

  6. u Calculate e 分类： HDU 2015-06-19 22:18 14人阅读 评论(0) 收藏

    u Calculate e Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  7. 选择轮廓(select_shape)

    选择轮廓(select_shape)     Halcon是一款运用广泛的图像识别和处理软件.在肤浅的接触中,它的轮廓选择算子(select_shape)给予我很深的印象.结果是往往几行代码就能够产生 ...

  8. C#获得枚举类型的长度

    enum MyEnum { Value1, Value2, } class Program { static void Main(string[] args) { var e = new MyEnum ...

  9. HDU(3555)，数位DP

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3555 Bomb Time Limit: 2000/1000 MS (Java/Others ...

  10. CountDownLatch的原理学习

    转载:http://blog.csdn.net/yanyan19880509/article/details/52349056 前言 前面介绍了ReentrantLock,又叫排他锁,本篇主要通过Co ...