2021-09-06 解决高度塌陷的产生和解决方法总结

最新推荐文章于 2023-01-01 14:16:03 发布
最新推荐文章于 2023-01-01 14:16:03 发布
阅读量84 收藏
点赞数
分类专栏： 面试 css 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/120122862
版权
面试 同时被 2 个专栏收录
41 篇文章 0 订阅
订阅专栏
css
13 篇文章 0 订阅
订阅专栏
高度塌陷的产生

父盒子没有设置宽高导致其高度塌陷

解决方法

1.给塌陷元素添加overflow:hidden
2.给浮动元素下方添加一个空盒子
3.万能清除法:

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

4.给父元素添加固定高度

前端OnTheRun
关注
专栏目录
高度塌陷的产生条件及解决方法
书山有路勤为径
03-09 332
高度塌陷的产生条件 子元素浮动，脱离文档流 子元素绝对定位或固定定位，脱离文档流 定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷， 本文主要讨论浮动产生塌陷的解决方法。 高度塌陷的解决方法 1、直接给父元素加高度 div{ border: 5px solid black; height: 200px; } p{ ...
CSS解决高度塌陷的方法
ccwy1的博客
03-01 5701
声明：本人才疏学浅，文中如有错误或不当之处，请各位指出，共同进步，谢谢！ 一、什么是高度塌陷 当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。 比如下面的效果： <div class="box1"> <div class="box2...
el-autocomplete修改下拉框宽度
kuguhuan的博客
08-06 4306
需求为在输入框中输入内容后，下面弹出匹配到的内容，没有匹配到就显示当前内容,实现后发现下拉框和输入框宽度一样，并不能完全显示全后台返回的内容，如下图 f12后发现下拉的代码并没有在当前div下，而是在body下，如下图 因此直接在页面上修改样式，不起作用，官方也没有说，查了很多文献，发现了解决方案，需要在模块中添加:popper-append-to-body=“false”，然后在看下拉框就到div下面了，然后再修改css样式： .el-popper[x-placement^=bottom]{ wi
JS解决子元素浮动或绝对定位造成的父元素高度塌陷问题
Arvin的博客
11-21 2044
当我们在代码中给子元素添加浮动或者绝对定位时，父元素会存在高度塌陷问题，可以使用JS来解决。 首先通过获取子元素的高度，将子元素的高度传给父元素，同时在页面窗口或框架被调整大小时获取子元素高度并传给父元素。代码如下： 子元素.onload = function () { height = this.height; 父元素.style.height = height + "px"; } window.onresize
高度塌陷的问题
weixin_41664064的博客
08-21 566
一、JDBC JDBC，即Java Datebase Connection。顾名思义，JDBC用于通过Java连接数据库。 二、JDBC与数据库的连接 三、插入、删除、更新 四、查询
解决高度塌陷的方法
m0_72975897的博客
08-10 883
解决高度塌陷的三种方法
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
解决高度塌陷的一种常见方法是使用“块格式化上下文”（Block Formatting Context，简称BFC）。BFC是一种渲染规则，它定义了元素内部元素如何布局。创建BFC的元素不会与外部元素发生重叠，并且可以正确地包含其内部...
前端难题：高度塌陷原因及多方法解决
本文将深入探讨高度塌陷产生的条件、具体表现以及多种解决方法。 **高度塌陷产生的条件** 1. **浮动元素影响**：当所有子元素都使用`float`属性浮动时，如`.child_1`和`.child_2`的例子中，它们不再占据其在正常...
Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题
大家好，我是+V
12-10 4919
Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题 最近有一个
高度塌陷和BFC
m0_56752010的博客
04-22 125
高度塌陷问题： 在浮动布局中，父元素的高度默认是被子元素撑开的， 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。 父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱。 所以高度塌陷是浮动布局中比较常见的一个问题，必须要进行处理。 BFC (Block Formatting Context) 块级格式化环境： -BFC 是一个css中的一个隐含的属性，可以为一个元素开启BFC。开启BFC该元素会变成一个独立的布局区域 -元素开启BFC后的特点
CSS、HTMl使用position: fixed;实现div的高度填满剩余空间
热门推荐
iceking66的博客
10-11 1万+
CSS、HTMl实现div的高度填满剩余空间 html> html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> *{ margin: 0; padding:0; } .conten
前端基础问题 -- 高度塌陷问题详解(面试重点问题)
兔子juan的博客
09-23 801
高度塌陷： 父元素的高度，默认被子元素撑开，目前来讲son多高，father就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素，导致父元素的高度丢失，就是我们说的高度塌陷问题。父元素一旦高度塌陷，则它下边的元素会向上移动，导致整个页面的布局混乱！ 例如，我们常常想要图一： 但是，输出的总是图二： 原理： 在w3c标准（非IE6以下版本采用的是W3C标准）...
2021-08-20 面试题:你在项目开发的过程中遇到哪些问题?都是如何解决的?
GAARA
08-20 1277
1.2021-06-11 解决异步问题:for循环中的点击事件无法获取自增中的i 2.2021-07-20 解决vue无法在view层实现检测数组更新的问题
2021-07-16 面试题:用 js 实现随机选取 10–100 之间的 10 个数字，存入一 个数组并排序
GAARA
07-16 975
思路: 获取随机数组 数组排序 代码: var arr = []; //获取10-100之间的10个随机数,并存放在在数组arr for (var i = 0; i < 10; i++) {arr[i] = getNum(10, 100);} console.log(arr); //排序前的随机数组 arr = change(arr); //排序 console.log(arr); //排序后的随机数组 //封装获取随机数方法 function getNum(min, max) {return Mat
2022-09-16 前后端交互方式总结:Promise定义和用法以及基于Promise 接口调用方式:ajax fetch axios async/await
GAARA
09-16 683
文章目录 零.Promise 1.什么是Promise? 2.使用Promise有什么好处? 3.pending,fullfilled和rejected是什么? 3.resolved和rejected是什么? 4.then和catch是什么? 3.Promise的基本用法 零.Promise 1.什么是Promise? Promise是JS中进行异步编程的一种新的解决方案,(旧方案是单纯使用回调函数) 语法上,Promise是一个对象,从Promise对象可以获取异步操作的消息 2.使用Promise有什
2023-01-01 Promise常见机试题和答案,主要考察:执行顺序,值透传,错误处理,返回值,链式调用
最新发布
GAARA
01-01 581
Promise 构造函数是同步执行的,then方法是异步执行的 var p = new Promise((resolve, reject) => { console.log(1) resolve(3) console.log(2) }) p.then(res => { console.log(res) }) console.log(4) //输出结果:1 2 4 3 new 一个Promise示例后,立即执行executor函数,它是同步的, 一直遇到resolve函数,把它
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值