<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. golang 赋值与声明语法糖使用注意事项

    赋值与声明语法糖 基本用法略, 搜索即可 注意事项 类型推断 := 会自动进行类型推断, 当想要的类型不是自己想要的类型时需要进行类型转换 // i1 默认是 int 类型 i1 := 1 // 当需 ...

  2. FTP服务器安装测试

    FTP服务器基本搭建 -- vsftpd 作用:文件的基本上传和下载 1.服务器端 软件的安装: $ sudo apt-get install vsftpd (1)修改配置文件 $ sudo vim ...

  3. Windows docker k8s asp.net core

    在上一篇文章 Ubuntu 18 Kubernetes的Install and Deploy 我们在ubuntu在部署了k8s集群, 今天来看看windows下怎么搞. 主要点有: 1) window ...

  4. Ubiq:A Scalable and Fault-tolerant Log Processing Infrastructure

    Abstract 互联网应用通常会产生大量的时间日志需要进行分析和处理.本文介绍Ubiq的架构,它是一个分布式系统,用于处理不断增长的日志文件,具有可扩展性.高可用.低延迟的特性.Ubiq框架容忍基础 ...

  5. 【LeetCode】680. Valid Palindrome II

    Difficulty:easy  More:[目录]LeetCode Java实现 Description https://leetcode.com/problems/valid-palindrome ...

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

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

  7. Java+Python+前端 学习资料大全 百度云盘

    Java架构师3大阶段 链接:https://pan.baidu.com/s/1DlXh33y5t4cZUmZH0cLvCw 提取码:5s76 2019前端架构阶段 链接:https://pan.ba ...

  8. 整理下log4net日志

    今天整理了下log4net日志,记录一下... 日志是一个系统排错的重要组成,有在之前的.NET中,微软还没有提供过像样的日志框架,目前能用的一些框架比如Log4Net.NLog.CommonLogg ...

  9. 对比度增强（二）：直方图正规划与伽马变换 cv.normal（）函数使用及原理

    直方图正规化: 图像为I,宽为W,高为H,I(r,c)代表I的第r行第c列的灰度值:输出图像记为O,为使得输出图像的灰度值在[Omin,Omax]范围里,可用如下公式:                 ...

  10. Java自学-数字与字符串 MyStringBuffer

    自己开发一个Java StringBuffer 根据接口IStringBuffer ,自己做一个MyStringBuffer 步骤 1 : IStringBuffer接口 package charac ...