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. QT高级运用之粒子模拟（Particle Simulations)

    粒⼦模拟是计算机图形技术的可视化图形效果.典型的效果有:落叶,⽕焰,爆炸,流星,云等等.它不同于其它图形渲染, 粒⼦是基于模糊来渲染.它的结果在基于像素下是不可预测的.粒⼦系统的参数描述了随机模拟的边 ...

  2. MySQL查询执行的基础

    当希望MySQL能够以更高的性能运行查询时,最好的办法就是弄清楚MySQL是如何优化和执行查询的.一旦理解这一点,很多查询优化实际上就是遵循一些原则让优化器能够按照预想的合理的方式运行. 换句话说,是 ...

  3. nhibernate 3.3 linq扩展

    nhibernate的sqlserver linq 全文检索搞了半天 方法一 ,扩展LinqToHqlGeneriatorsRegistry http://www.cnblogs.com/xiarug ...

  4. Android的两种菜单

    Android子菜单和选项菜单与上下文菜单的实现 菜单在Android开发中必不可少,可是要怎么实现各种菜单呢?是不是很头疼呢?下面我就来介绍一下: 1. 选项菜单和子菜单的实现 选项菜单:最常规的菜 ...

  5. 更改Altium中PCB大小/精确确定板子尺寸

    使用原理图生成PCB后,Altium Designer会根据原理图大小自动生成一块黑色区域,还有一个在禁止布线层的方框,还有两段标注板子大小的线.下面说一下如何更改黑色区域的大小,还有如何精确确定板子 ...

  6. maven下载及配置

    Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xm ...

  7. 数据加密算法---base64

    简介 base64是把8位字符打散,转换成不被人直接识别的形式,严格来说它并不是加密算法,只能算做一种编码方式 原理 首先准备64个字符数组做为“数组库” ['A', 'B', 'C', ... 'a ...

  8. 创建多模块maven项目

    有两种方式: 1,new -->maven project-->maven-archetype-quickstart 建完多个独立的project后,手动修改pom文件的packing类型 ...

  9. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  10. chrome devtools 实用快捷键

    Ctrl + O:查找资源,非常使用 Ctrl + Shift + C:切换审查元素模式与浏览器窗口模式 Ctrl + Shift + F:在源代码中搜索 Ctrl + G:跳转到指定行