和所有刚入门的菜鸟一样，我发现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. 使用js设置input标签只读 readonly 属性

    先上代码: <html> <head> <title> test </title> <meta charset="utf-8" ...

  2. pull 解析XML 文件

    pull解析的特点 事件驱动机制来解析 当解析到一个节点,会自动停止,不会往下继续解析,好处 :很好能够控制流程 android默认采用pull解析 pull解析的事件类型 start_documen ...

  3. Java-输入输出流

    JAVA-输入输出流 1.输入输出: 输入/输出(Input/Output)是指对某个设备或环境进行数据的输入或输出．任何语言都有输入输出的功能,在Java程序中,是通过流来完成输入和输出的,它通过J ...

  4. [POJ2069]Super Star（模拟退火）

    题目链接:http://poj.org/problem?id=2069 题意:求一个半径最小的球,使得它可以包围住所有点. 模拟退火,圆心每次都去找最远那个点,这样两点之间的距离就是半径,那么接下来移 ...

  5. OpenCV2+入门系列（三）：遍历图像的几种方法

    根据OpenCV中Mat类型的结构和内存中存储方式,此处给出三种对图像进行遍历的方法.首先给出基础的读取图片代码,在中间替换三种遍历方法即可,本文中,程序将遍历图像并将所有像素点置为255,所有运行结 ...

  6. PHP的基本排序算法

    1 冒泡排序 <?php /** * 冒泡排序(从小到大) * 基本思想:两两比较相邻记录,一次循环确定一个数 * 在所有的排序算法中是最慢的,尤其当数据量较大的时候,数据小体现不出来 */ $ ...

  7. List去重复（不是最简单，但绝对是最易理解）

    for (int i = 0; i < courselist.size(); i++) //外循环是循环的次数 { for (int j = courselist.size() - 1 ; j ...

  8. AndroidStudio NDK配置使用以及错误集合

    Error:Execution failed for task ':app:transformNative_libsWithStripDebugSymbolForDebug'. > java.l ...

  9. android Glide图片加载框架的初探

    一.Glide图片加载框架的简介 谷歌2014年开发者论坛会上介绍的图片加载框架,它让我们在处理不管是网路下载的图片还是本地的图片,减轻了很多工作量, 二.开发步骤: 1.添加链接库 compile ...

  10. Appium之python API

    webdriver contexts(self) 说明:返回多个会话内容 使用:driver.contexts current_context(self) 说明:返回单个会话的内容 使用:driver ...