和所有刚入门的菜鸟一样,我发现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. Mojette

    Mojette Transform 是由Polytech Nantes的IRCCYyN实验室的Jeanpierre Guédon首先提出的一种离散的几何转换,它来源于Radon transform,是 ...

  2. 在myeclipse下安装svn的几种方式

    方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框,在对话框Name输入Sv ...

  3. SQL基础--索引

    索引的概念: 在数据库中索引是用于提升数据库查询操作性能的一种手段,但在频繁更新的表上,索引反而会降低性能. 常用的索引结构: B*树索引 位图索引 B树索引: B书索引是最基本的索引结构,Oracl ...

  4. 装逼名词 bottom-half,软中断,preemptive选项

    bottom-half http://bbs.csdn.net/topics/60226240 在中断,异常和系统调用里看Linux中断服务一般都是在关闭中断的情况下执行的,以避免嵌套而是控制复杂化L ...

  5. /etc/ethers【地址映射】

    该文件存放硬件地址和 IP 地址的映射关系. 格式如下: 00-00-00-00-00-00 0:0:0:0 每一行代表一个 IP 地址.

  6. mybatis mysql 调用视图

    java代码 @RequestMapping(value = "/testView", method = RequestMethod.GET) public @ResponseBo ...

  7. 小程序 web 端实时运行工具

    微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

  8. VB调用sendinput API

    http://files.cnblogs.com/files/liuzhaoyzz/VB%E8%B0%83%E7%94%A8sendinput_API.rar sendinput只支持发送字符或者组合 ...

  9. activeMQ 安装于使用

    简易教程: http://blog.csdn.net/jiuqiyuliang/article/category/5617711

  10. IntelliJ IDEA中Maven项目的默认JDK版本

    在IntelliJ IDEA 15中使用Maven时,IDEA将默认的编译版本.源码版本设置为jdk5.编译项目的时候出现警告:"Warning:Java: 源值1.5已过时, 将在未来所有 ...