和所有刚入门的菜鸟一样，我发现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. HMI与设计模式

    设计模式是做一个好的架构的一个基础.那么设计模式具体的概念是啥呢?百度百科曰:设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是 ...

  2. 读《编写可维护的JavaScript》第八章总结

    第八章 避免“空比较” 我们在对传进来的参数做处理之前,肯定需要验证一下是否是我们想要的,也就是说大多数情况下,我们需要对比一下它的类型. 作者首先给了一个看起来都感觉不对的代码: var Contr ...

  3. git push免输入账号和密码方法

    最近在做些oj,所以需要频繁的git push提交代码,每次都要输入帐号和密码,感觉不舒服,于是乎就做了如下设置,然后就可以开心的提交啦- Linux或者Mac下方法: 创建文件,进入文件,输入内容: ...

  4. EJB的调用

    EJB调用.html :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0,0,.1);border ...

  5. phpstorm 设置Utf8编码

    点击file 再点击setting 找到file Encoding gbk改成utf-8就ok了

  6. C语言多文件编译

    fun.c #include <stdio.h> int fun1(){ printf("The first function!\n"); return 0; } in ...

  7. php curl 采集

    curl 采集五个步骤: 1.curl_init()初始化curl 2.curl_setopt()设置传输数据和参数 3.curl_exec()执行传输并获取返回数据 4.curl_errono()返 ...

  8. [SQL] SQL 查出一张表中重复的所有记录

    在A表中存在一个字段“AccountId”,而且不同记录之间的“AccountId”值有可能会相同,现在就是需要查询出在该表中的各记录之间,“AccountId”值存在重复的项,这里count记录该字 ...

  9. web-app子元素

    ?表示可选,最多一个:*表示0个或多个. web-app (icon?, display-name?, description?, distributable?, context-param*, fi ...

  10. mysql的操作

    关系型数据库是表格形式,比普通文件存储访问数据的速度更快,更容易查阅和提取满足特定条件的数据 关系数据库具有内置的权限系统 每一条数据对应唯一的标识 1,打开XAMPP继承的数据库  打开mysql ...