和所有刚入门的菜鸟一样，我发现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. HTML5 LocalStorage 本地存储原理详解

    首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...

  2. '"千"第一周学习情况记录

    一周过去了,今天将我这一周的学习内容和主要感想记录与此和大家共同分享,一起进步.我将自己的学习计划命名为"千",因为我喜欢这个字,希望能用此来鼓舞自己不断前进.时间总是很快的,这一 ...

  3. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...

  4. mysql查询一个小知识点,查询结果是空与查询出错是不一样的

    $conn = new mysqli(....); $sql = ""; $query = $conn->query($sql); 这里,如果查询正常,有数据返回,那么$qu ...

  5. OpenCV2+入门系列（二）：图像的打开、创建与显示（命令行）

    前置知识:数字图像的简略知识 这里只是最基础的知识,上课如果稍微听了课的同学可以直接略过不不看. 彩色图像: 对于一副数字图像,对于一副RGB色彩空间的彩色数字图像,它一共有宽X高个像素格子,每个格子 ...

  6. C++ 应用处理异常崩溃（转载）

    有时,在我们的程序运行的时候,会遇到一些崩溃问题,尤其是概率出现的时候,如果能捕获其异常,那么对于我们快速定位bug是很有帮助的 这里借用网上搜寻回来的函数,记录一下: 头文件及库: #include ...

  7. 关于django访问默认后台admin的时候提示403错误，

    Forbidden (403) CSRF verification failed. Request aborted. You are seeing this message because this ...

  8. redhat samba匿名登录服务器搭建

    smb服务器只需要yum install samba 安装起,并修改配置文件就可以匿名使用了.   smb配置文件,这里允许匿名登录.红色部分代表我共享出来文件夹参数code [root@localh ...

  9. Vue刨坑

    vue常见问题 1.在自定义组件里,你可以像任何普通元素一样用v-for.eg1: <my-component v-for="item in items"></m ...

  10. CSS3图片倒影技术实现及原理

    CSS3图片倒影技术实现及原理 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏 ...