解决高度塌陷问题的方法:

方法一、

//给父元素添加声明
overflow:hidden;
缺点:回隐藏溢出的元素;

方法二、

在浮动的元素下添加空div标签,并给该元素添加声明:
clear:both;
height:0;
overflow:hidden;
缺点:在结构里增加了空标签,不利于代码可读性,且降低了浏览器性能;

方法三、

万能清除浮动法:
选择符:
.clear:after{
content: ' ',
clear: both;
display:block;
height:0;
visibility:hidden;
}
.clear{zoom:1;} //兼容IE6、7

如何解决浮动元素高度塌陷---CSS的更多相关文章

  1. css float父元素高度塌陷

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

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

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

  3. css关于浮动的高度塌陷

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

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

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

  5. overflow:解决 div的高度塌陷问题

    高度塌陷是如何引起的? 解析: 当一个 div中所有的子  div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中 设置其  overflow:hidden;即可解决高度塌陷问题. 方式 ...

  6. HTML连载47-设计思想、浮动元素高度问题

    一.设计网页的思想 拿到需求之后我们先对各个模块(盒子)进行划分,然后从外到内进行设计(1)设计一个盒子最基本的设计大致包括背景颜色(其实用于识别),宽,高,边界浮动流还是标准流. (2)然后盒子和盒 ...

  7. HTML中由于DIV(块元素)浮动,导致的父元素高度塌陷问题的解决方案

    费话不多说,直接上问题: 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样 ...

  8. css flew 布局 解决父元素高度不固定,子级居中。

    给父级添加 display: flex; justify-content: flex-start; align-items: center; 子级里的内容永远居中

  9. html高度塌陷问题解决

    高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠    开启BFC的元素不会被浮动元素所覆盖    开启BFC的元素可以包含浮动的子元素 如何开启 ...

随机推荐

  1. testlink在win7下的安装\配置\使用

    1.xampp >解压并安装xampp >在安装目录下点击setup_xampp(这一步是为了初始化一些环境的配置) >再启动xampp-control,运行Apache和MySQL ...

  2. HDFS中NameNode工作机制

    引言 NameNode: 存储元数据 管理整个HDFS集群 DataNode: 存储数据的block SecondaryNameNode: 辅助HDFS完成一些事情 NameNode和Secondar ...

  3. [C++]-set 集合

    set集合用于存放一组无重复的元素.由于集合本身是有序的,所以可以高效地查找指定元素,也可以方便地得到指定大小范围地元素在容器中所处区间. 代码 #include<iostream> #i ...

  4. PDL语言/ 盒图N-S/ PAD图

    PDL语言 伪码伪代码 基本语法 算法用Begin开始,以End结束(如果只表示中间部分的算法可以不要) 每一条指令,占一行.指令的结束不用任何符号 注释 用"//"表示 用Pri ...

  5. 使用各类BeanUtils的时候,切记注意这个坑!

    在日常开发中,我们经常需要给对象进行赋值,通常会调用其set/get方法,有些时候,如果我们要转换的两个对象之间属性大致相同,会考虑使用属性拷贝工具进行. 如我们经常在代码中会对一个数据结构封装成DO ...

  6. SpringMVC学习08(拦截器)

    8.拦截器 概述 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.开发者可以自己定义一些拦截器来实现特定的功能. 过滤器与拦截器的区别: ...

  7. git 切换分支 本地代码失踪找回办法

    解决方案: https://blog.csdn.net/hupoling/article/details/79017382 主要步骤: git reflog 然后找到之前commit的分支 git c ...

  8. Git出错:“Please make sure you have the correct access rights and the repository exists.”

    此问题是需要重置ssh密钥 解决步骤如下: 1.重置用户名和邮箱: 打开Git Bash 进入Git命令,输入以下命令 git config --global user.name "你的用户 ...

  9. 【笔记】偏差方差权衡 Bias Variance Trade off

    偏差方差权衡 Bias Variance Trade off 什么叫偏差,什么叫方差 根据下图来说 偏差可以看作为左下角的图片,意思就是目标为红点,但是没有一个命中,所有的点都偏离了 方差可以看作为右 ...

  10. 接口测试--测试工具:rap2 接口文档解析

    通过百度 OCR 工具识别 rap2 登录中的验证码,从而实现登录~那我们今天来实战解析 rap2 的接口数据,生成我们所需要的接口数据 实践上手 文档分析 1.我们先通过 F12 看看哪个接口是我们 ...