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

方法一、

//给父元素添加声明
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. CVE-2018-12613总结

    1.漏洞基础介绍 1.1漏洞背景 phpMyAdmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库.借由此We ...

  2. Java练习——加减乘除计算器实现

    Java练习--计算器(加减乘除)  package method; import java.util.Scanner; /*  写一个计算器 实现加减乘除四个功能   并且能够用循环接收新的数据,通 ...

  3. HCIA-网络层IP地址

    TCP/IP 每一层关联性 网络接口层-->TYPE 上层的网络层 --> Protocol -->不同的传输层协议 DSAP SSAP IP地址 剩下的8个字节 IPV4地址 4个 ...

  4. SpringBoot-静态资源加载-源码

    目录 静态资源映射规则 什么是webjars 呢? 第二种静态资源映射规则 参考链接 静态资源映射规则 SpringBoot中,SpringMVC的web配置都在 WebMvcAutoConfigur ...

  5. Java:导出Excel大批量数据的优化过程

    背景 团队目前在做一个用户数据看板(下面简称看板),基本覆盖用户的所有行为数据,并生成分析报表,用户行为由多个数据来源组成(餐饮.生活日用.充值消费.交通出行.通讯物流.交通出行.医疗保健.住房物业. ...

  6. Java TreeMap 和 LinkedHashMap【笔记】

    Java TreeMap 和 LinkedHashMap[笔记] TreeMap TreeMap基本结构 TreeMap 底层的数据结构就是红黑树,和 HashMap 的红黑树结构一样 与HashMa ...

  7. Elasticsearch核心技术(二):Elasticsearch入门

    本文从基本概念.基本CRUD操作.倒排索引原理.分词等部分来初识Elasticsearch. 2.1 基本概念 Elasticsearch是面向文档(Document)的,文档是所有可搜索数据的最小单 ...

  8. Upfile的几种常见姿势

    记录一下文件上传的常见姿势,更全面的可以做upload-labs. 实验环境:win2003 phpstudy 实验平台:upfile 一.准备上传的一句话木马 eval函数将接受的字符串当做代码执行 ...

  9. NOIP 模拟 $18\; \rm 老司机的狂欢$

    题解 \(by\;zj\varphi\) 一道很有趣的题,我用的动态开点线段树和倍增 首先对于第一问,不难想到要二分,二分时间,因为时间长一定不会比时间短能跑的人多 那么如何 check,先将所有老司 ...

  10. uniapp封装小程序雷达图组件实现

    效果图: view <canvas id="radar-canvas" class="radar-canvas" type="2d"& ...