方法一：

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. android应用的数据应该保存到哪儿

    王永超王永超嫖娼 做android app开发会涉及到不同数据的保存,比如数据缓存,客户登陆信息保存,客户状态的保存等等. 那针对这不同的数据我们应该保存在什么地方呢? 1.应用卸载也不会删除的数据 ...

  2. CSS3前缀自动补全方案和插件

    第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...

  3. 简单的分页sql

    select top 5 * from books where id not in(select top (5*(5-1)) id from Books order by id) order by i ...

  4. 选择轮廓(select_shape)

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

  5. HDU 4920 Matrix multiplication 矩阵相乘。稀疏矩阵

    Matrix multiplication Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/ ...

  6. Android各种获取Context方法

    首先讲一讲这四个函数的区别,后面还有我对context的一些理解区别如下所示: 原文链接http://stackoverflow.com/questions/6854265/getapplicatio ...

  7. qt中信号与槽机制

    一. 简介 就我个人来理解,信号槽机制与Windows下消息机制类似,消息机制是基于回调函数,Qt中用信号与槽来代替函数指针,使程序更安全简洁. 信号和槽机制是 Qt 的核心机制,可以让编程人员将互不 ...

  8. 2016年11月2日 星期三 --出埃及记 Exodus 19:18

    2016年11月2日 星期三 --出埃及记 Exodus 19:18 Mount Sinai was covered with smoke, because the LORD descended on ...

  9. Repeater的Command操作

    Repeater的Command操作 1.ItemCommand事件 :在Repeater中所有能触发事件的控件,都会来触发这一个事件 后台创建:在Page_Load中 Repeater1.ItemC ...

  10. MVC 异步请求

    <head> <meta name="viewport" content="width=device-width" /> <tit ...