css高度塌陷及解决方法

el/2024/2/25 23:22:33

css高度塌陷及解决方法

为什么会出现高度塌陷?

1.父元素高度自适应,子元素 float 后,只要子元素脱离了文档流后,造成父元素高度为0,称为高度塌陷问题。
2.在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

解决方法

1.最简单的解决方式就是给父容器设置一个固定的高度
劣处:给父元素设置固定高度后,就不能进行高度自适应
2.给父元素也设置浮动
劣处:
(1)虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响。
(2)如果也设置浮动,父元素宽度就会随着子元素变化
3.给父元素添加属性 overflow: hidden;zoom:1;
优点:兼容性强。
劣处:
(1)对margin属性有影响,不能设负值,设负值无效。负值绝对定位也不可以。要是子元素要margin负值定位或是负的绝对定位,会被裁掉,所以此方法是有局限性的。
(2)当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。
4.在浮动元素后添加一个div
优点:
(1) 代码量少 容易掌握 简单易懂
(2)所有浏览器都支持,并且容器溢出不会被裁剪;
劣处:
(1)在页面中添加无意义的div,容易造成代码冗余。
(2)添加了无意义标签,不易于后期维护,违背了结构和表现分离的标准
(3)不利于优化

div{clear: both;height: 0;overflow: hidden;
}

5.万能清除浮动法
在父元素中内容的最后添加一个伪元素来实现第三种方案的功能
优点: 不会造成代码冗余,不破坏文档结构,剩余代码性能优化,推荐使用。
劣处: 代码量多

父元素:after{content: "";height: 0;clear: both;overflow: hidden;display: block;visibility: hidden;
}

http://www.ngui.cc/el/4893723.html

相关文章

jQuery的基于本地存储的增加和删除操作

jQuery的添加和删除 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" conte…

js-构造函数

一、什么是构造函数 构造函数其实是一种特殊的函数&#xff0c;主要用来初始化对象&#xff0c;也就是为对象成员变量赋初始值&#xff0c;它总与new关键字一起使用。我们可以把对象里面一些公有的属性和方法抽象出来封装到这个构造函数里面。这样我们就可以通过一个构造函数创…

js中的作用域与作用域链

作用域 理解 就是一块“地盘”&#xff0c;一个代码段所在的区域 他是静态的&#xff08;相对于上下文对象&#xff09;&#xff0c;在编写代码时就确定了分类 全局作用域 函数作用域 没有块作用域&#xff08;ES6有了&#xff09; 例&#xff1a; if(true) {var c 3}console…

js-对象创建模式

Object构造函数模式 套路:先创建空的Object对象,再动态添加属性方法 适用场景:起始时不确定对象内部数据 问题:语句太多例: var p1 = new Object()p1.name = Tomp1.age = 12p1.setName = function (name) {this.name = name}console.log(p1.name,p1.age) //Tom 12p1.setN…

数据结构与算法 排序(一)

简单排序 记录一些简单的排序算法 基于比较的排序 选择排序 稳定算法 算法思想 给定一个数组&#xff0c;遍历数组 选出第一小的数&#xff0c;放在第0位&#xff1b; 选出第二小的数&#xff0c;放在第1位&#xff1b; 选出第三小的数&#xff0c;放在第2位&#xff1b; ~ 周…

Mysql索引底层(一)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…

Explain工具和索引优化(二)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…

MySQL索引优化(四)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…

SQL在MySQL中执行流程(三)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…

MySQL事务与锁 (五)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…