css float父元素高度塌陷

float 使父元素高度塌陷不是BUG,反而是标准。

float 原本是为了解决文字环绕才出现的。

当然有的时候要解决高度塌陷的问题

以下几个方法可以解决float 父元素高度消失/塌陷的问题



.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}

.clearfix {*zoom:1}

更好的方法是



.clearfix:after{content:'';display:table clear:both;}

.clearfix {*zoom:1}

css float父元素高度塌陷的更多相关文章

  1. CSS float 父元素高度自适应

    <html> <head><title></title><style type="text/css">*{margin: ...

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

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

  3. HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

    费话不多说,直接上问题: 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样 ...

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

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

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

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

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

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

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

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

  8. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

  9. 学习微信小程序之css15解决父盒子高度塌陷

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. wininet API调用，检测网络

    [DllImport("wininet")]        private extern static bool InternetGetConnectedState(out int ...

  2. php视图操作

    一.视图的基本介绍          视图是虚拟的表.与包含数据的表不一样,视图只包含使用时动态检索数据的查询.         使用视图需要MySQL5及以后的版本支持.         下面是视图 ...

  3. 你好，C++（28）用空间换时间 5.2 内联函数 5.3 重载函数

    5.2  内联函数 通过5.1节的学习我们知道,系统为了实现函数调用会做很多额外的幕后工作:保存现场.对参数进行赋值.恢复现场等等.如果函数在程序内被多次调用,且其本身比较短小,可以很快执行完毕,那么 ...

  4. 微信 回复多图文 借助php框架

    private function replyMostPhoto($data,$arr){$this->logger("已经到达回复多图文!".$arr[0]['Title'] ...

  5. ios 实时刷新屏幕

    index=; // timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:layer selector:@selector(setNe ...

  6. IO通信

    DeviceIoControl 发送控制代码到指定设备驱动程序 参数解释: hDevice Long,设备句柄 dwIoControlCode Long,应用程序调用驱动程序的控制命令,就是IOCTL ...

  7. Codeforces739E Gosha is hunting

    题意:现在有n个精灵,两种精灵球各m1和m2个,每个精灵单独使用第一种精灵球有pi的概率被捕获,单独使用第二种精灵球有ui的概率被捕获,同时使用有1-(1-pi)*(1-ui)的概率被捕获.一种精灵球 ...

  8. favicon支持的图片格式

    为网站设置favicon有两种方式: 1.网站根目录下放置名为favicon.ico的图片,浏览器就会自动获取: 2.在页面中通过<link rel="shortcut icon&qu ...

  9. BZOJ3402: [Usaco2009 Open]Hide and Seek 捉迷藏

    3402: [Usaco2009 Open]Hide and Seek 捉迷藏 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 51  Solved: 4 ...

  10. POJ 1979 深度优先搜索

    题意:有红色和黑色的格子,只能走黑色的,问从起始位置出发,最多能走到达多少块黑色格子. 分析:相当于走迷宫,黑色格子是路,红色格子是墙,每次到达一个未到达过的格子时计数,原点也算是一个.每次可以走上下 ...