<html>

<head><title></title>
<style type="text/css">
*{margin:0 ;padding:0;}
.content{
border:1px solid red;
}
.fl{float:left}
</style>
</head>

<body>

　　<div class="content">

　　<div class="fl" >1</div><div class="fl">2</div>

　　</div>

</body>

</html>

结果如下：

class 拥有float的属性已经脱离正常的文档流，所以父元素中相当于没有正常文档流填充。高度为0，我们想让父节点高度自适应float元素的高度。

要在父元素里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .content{ overflow:hidden; zoom:1; margin:5px auto;}

CSS float 父元素高度自适应的更多相关文章

  1. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  2. CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  3. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

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

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

  5. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  6. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  7. CSS父元素高度随子元素高度变化而变化

    <html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...

  8. float浮动之后高度自适应失效解决方案

    float浮动之后高度自适应失效解决方案 >>>>>>>>>>>>>>>>>>>> ...

  9. CSS实现父元素半透明，子元素不透明

    CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...

随机推荐

  1. adb和fastboot的使用

    1.前言 随着Android系统的普及,ADB(Android Debug Bridge)逐渐成了Android设备调试的必不可少的一种重要工具,该工具可以完成多种功能,例如跟踪系统日志,上传或下载文 ...

  2. SQL Server -----创建sqlserver 数据库 、表

    新建数据库 1.右击  选择新建数据库 2.起一个名字   选择保存位置 3.放在之前建好的的文件夹中 点击确定 4.都要选择好 点击确定 5.确定之后如图 6.新建表 7.见一个表,常说的要满足三大 ...

  3. Jvm内存总结

    对于不同的Jvm及不同的jdk版本内存模型不同 内存区域 名称 作用 参数 异常 分析方法 解决方案 Heap 堆内存 存储对象 -Xms -Xmx Java.lang.OutOfMemeoryErr ...

  4. 【转】AXI_Lite 总线详解

    目录: · 1.前言 · 2.AXI总线与ZYNQ的关系 · 3 AXI 总线和 AXI 接口以及 AXI 协议 · 3.1 AXI 总线概述 · 3.2 AXI 接口介绍 ·3.3 AXI 协议概述 ...

  5. Django CBV和FBV

    Django CBV和FBV Django内部CBV内部接收方法操作: 1.通过客户端返回的请求头RequestMethod与RequesrtURL,会以字符串形式发送到服务器端. 2.取到值后通过d ...

  6. LOJ2257 SNOI2017 遗失的答案 容斥、高维前缀和

    传送门 数字最小公倍数为\(L\)的充分条件是所有数都是\(L\)的约数,而\(10^8\)内最多约数的数的约数也只有\(768\)个.所以我们先暴力找到所有满足是\(L\)的约数.\(G\)的倍数的 ...

  7. java中System.err.print和System.out.print区别

    System.err.print    是报错专用输输出,有颜色标记,所有err打印的都在顶行输出 System.out.print   是标准输出,白底黑字 package iobuffer; pu ...

  8. java运算符的优先级别

    一.运算符的优先级 运算符按照优先级别的高低排序分别是:自加/减运算符. 算术运算符.比较运算符.逻辑运算符.赋值运算符.具体请参考下表: 顺序 运算符 1. 括号,如 ( ) 和 [ ] 2. 一元 ...

  9. RabbitMQ学习之Publish/Subscribe(3)

    上一个教程中,我们创建了一个work queue. 其中的每个task都会被精确的传送到一个worker. 这节,我们将会讲把一个message传送到多个consumers. 这种模式叫做publis ...

  10. GIt 错误与常用命令

    命令和一些其他的属性等 *)在使用git commit -m “description" 这个描述会加在上次提交后所有add的文件后面,所以也可能产生不符合这个描述的文件后面也跟了这个描述, ...