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. mobx react

    目录结构: Model/index.js 'use strict'; import { action, autorun, observable, computed } from "mobx& ...

  2. 28 Corn表达式详解 (转自http://blog.csdn.net/claram/article/details/51785193）

    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month ...

  3. Ubuntu 13.04 用Sublime Text 2 编译运行 JAVA

    将下面的代码粘贴到JavaC.sublime-build中: { "cmd": ["javac \"$file_name\" && j ...

  4. Web前端浏览器兼容初探

    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...

  5. span里设置高度

    众所周知,SPAN元素内单纯设置height是没有效果的. 需要设置SPAN的高度,需要将其设置成block元素. display:block 但这样会导致span占据了整一行,我们通常不希望这样. ...

  6. Java导入证书失败Keystore was tampered with, or password was incorrect

    keytool 错误: java.io.IOException: Keystore was tampered with, or  password was incorrect   在进行证书相关操作, ...

  7. 我自己的style

    /** DATE:Time AUTHOR:Zoe TEAM:公司名称 INTRO:cssName **/ @charset "utf-8"; /*通用公共样式 开始*/ /* 清除 ...

  8. 细说PHP优化那些事

    我们在用PHP编程的时候,总是想要使自己的程序占用资源最小,运行速度更快,代码量更少.往往我们在追求这些的同时却失去了很多东西.下面我想讲讲我对PHP优化的理解.优化的目的是花最少的代价换来最快的运行 ...

  9. range与xrange

    range与xrange的用法是完全相同的,不同的是返回结果不同:range返回的是一个list,而xrange返回的是一个生成器.可以来看下 print type(range(5)) print t ...

  10. Hive笔记--配置以及遇到的问题

    ubuntu安装mysql  http://www.2cto.com/database/201401/273423.html Hive安装: http://www.aboutyun.com/forum ...