<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. 【神经网络与深度学习】chainer边运行边定义的方法使构建深度学习网络变的灵活简单

    Chainer是一个专门为高效研究和开发深度学习算法而设计的开源框架. 这篇博文会通过一些例子简要地介绍一下Chainer,同时把它与其他一些框架做比较,比如Caffe.Theano.Torch和Te ...

  2. zooKeeper使用记录

    背景:记录zooKeeper使用过程中遇到的问题. 在删除zooKeeper相关节点的时候需要进行权限的认证,下面的连接讲的还是很详细的 zookeeper的ACL权限控制

  3. Python【每日一问】30

    问: [基础题]:一个足球队在寻找年龄在10岁到12岁的小女孩(包括10岁和12岁)加入.编写一个程序,询问用户的性别(m表示男性,f表示女性)和年龄,然后显示一条消息指出这个人是否可以加入球队,询问 ...

  4. MD5加盐与安全

    PHP开发者对md5()这个函数是熟悉不过了,很多开发者都使用md5('abc123')对用户密码进行加密处理,这样做没有错,但是安全性还是很低的,因为很多网站的用户数据都是用md5进行加密处理的,所 ...

  5. 2019 C/C++《阿里》面试题总结

    一.C和C++的区别是什么? C是面向过程的语言,C++是在C语言的基础上开发的一种面向对象编程语言,应用广泛. C中函数不能进行重载,C++函数可以重载 C++在C的基础上增添类,C是一个结构化语言 ...

  6. C语言知识点总结篇

    Debug和Release版本比较 Debug附加了许多调试信息,主要用于调试,故文件大: Release是经过优化后的版本,去掉了调试信息,代码进行了优化,故文件较小,且编译速度快过Debug,用于 ...

  7. NodeJS 使用内容以及模拟一个接口

    1.结合上一篇 安装完Nodejs之后 通过手动创建一个完整的NodeJs项目 2.https://www.jianshu.com/p/7b0a5d4491ba 创建一个完整的项目之后 3.下面是一个 ...

  8. [CF24A]Ring road(2019-11-15考试)

    题目大意 给你一个\(n\)个点的环,每条边有方向,改变第\(i\)条边的方向代价为\(w_i\),问将其改为强连通图的最小代价.\(n\leqslant100\) 题解 求出把边全部改为顺时针和全部 ...

  9. SQL Server的唯一键和唯一索引会将空值（NULL）也算作重复值

    我们先在SQL Server数据库中,建立一张Students表: CREATE TABLE [dbo].[Students]( ,) NOT NULL, ) NULL, ) NULL, [Age] ...

  10. js-beautify 不换行

    最近在用Hbuilder-X,自带js-beautify.但是默认格式化设置实在是看着太难受.来看看一个VX的格式化,参数愣是给用了三行才格式化完,而且两个参数还分开了,看着太难受. // mutat ...