和所有刚入门的菜鸟一样，我发现float有高度塌陷问题，又很偶然的发现float元素后加<img/>能消除float带来的破坏性。

后来百度了一下，大部分的float高度塌陷问题都没有提及img带来的影响。

解决高度塌陷问题方法：

1.在最后一个元素后加入<div style="clear:both">

2.father-div设置高度

3.父元素加上after伪元素：

 
其中第三种方法的效果是最好的，和<img/>差不多，不过好像还是after比较优一点。

关于float高度塌陷问题的更多相关文章

  1. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  2. CSS: inline-block的应用和float块高度塌陷

    普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象.   高度塌陷解决方法:   ...

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

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

  4. CSS高度塌陷

    问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...

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

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

  6. CSS高度塌陷问题与解决办法

    问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...

  7. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  8. css之高度塌陷及其解决方法

    浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

  9. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

随机推荐

  1. redis3.0.6安装（linux和windows）

    官网上描述安装方法如下:$ wget http://download.redis.io/releases/redis-3.0.6.tar.gz$ tar xzf redis-3.0.6.tar.gz$ ...

  2. SQL Join的一些总结

    1.1.1 摘要 Join是关系型数据库系统的重要操作之一,SQL Server中包含的常用Join:内联接.外联接和交叉联接等.如果我们想在两个或以上的表获取其中从一个表中的行与另一个表中的行匹配的 ...

  3. 用Python生成组织机构代码，附源码

    #!/usr/bin/python import random def haoma(): ww = [3,7,9,10,5,8,4,2]#suan fa yin zi cc = [] dd=0 for ...

  4. Python虚拟开发环境

    最近,一直在不同版本的Python之间来回折腾,发现了几个Python虚拟开发环境工具,具体如下: 1. Virtualenv,可以指定开发环境的Python版本.继承已有开发环境配置,virtual ...

  5. 修改客户端连接的服务器IP地址（内部使用）

    登录系统时如果出现 “验证失败”,或者,无法登陆系统,请修改服务器端IP地址,修改方法如下: 注意: (1)修改服务器端IP地址时,要提前关闭/退出客户端.建议也看看“Windows的任务管理器”中是 ...

  6. linux多文本替换内容

    之前不小心写错了代码,把nil写成了Nil,脚本写的传到git中了,批量替换解决办法: grep "Nil" -rl $PATH/ |xargs sed -i 's/Nil/nil ...

  7. gulp入门演练

    一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的 gulp安装 安装gulp 如果参数-g 表示全局安装 $ npm install g ...

  8. what is difference in (int)a,(int&)a,&a,int(&a) ?

    This interview question come from a famous communication firm of china. : ) #include <iostream> ...

  9. Android判断GPS是否开启和强制帮用户打开GPS

    引子:在我们的应用为用户提供定位服务时,通常想为用户提供精确点的定位服务,这是需要用户配合的.我们必须先检测用户手机的GPS当前是否打开,若没打开则弹出对话框提示.用户若不配合我们也没办法,只能采用基 ...

  10. [SoapUI] Groovy在SoapUI里获取Text文本第一行数据

    // get external txt file datadef groovyUtils =new com.eviware.soapui.support.GroovyUtils(context)def ...