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

最新推荐文章于 2023-08-31 13:15:26 发布
原创 最新推荐文章于 2023-08-31 13:15:26 发布 · 120 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

当父元素内的浮动元素导致父盒子高度塌陷时，可以采用多种方法来解决。包括设置`overflow:hidden`，添加清浮动空盒子，或者使用CSS的`:after`伪元素结合`clear:both`和`display:block`。这些技术旨在恢复父元素的高度计算，避免内容溢出或布局问题。
高度塌陷的产生

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

解决方法

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

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

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

CSS解决高度塌陷的方法
ccwy1的博客
03-01 5858
声明：本人才疏学浅，文中如有错误或不当之处，请各位指出，共同进步，谢谢！ 一、什么是高度塌陷 当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。 比如下面的效果： <div class="box1"> <div class="box2...
2021-07-16 面试题:用 js 实现随机选取 10–100 之间的 10 个数字，存入一 个数组并排序
GAARA
07-16 1054
思路: 获取随机数组 数组排序 代码: 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
iframe高度塌陷，设置100%无效解决方案
前端~锋小张
08-31 1545
【代码】iframe高度塌陷，设置100%无效解决方案。
el-autocomplete修改下拉框宽度
code_carrierV1的博客
04-15 7353
el-autocomplete修改下拉框宽度 el-autocomplete 对下拉框的默认宽度是跟输入框一样的大小，如果下拉框的内容放不下，我们就要自己指定宽度 方法如下： element-ui el-autocomplete指定属性:popper-append-to-body=“false” <el-autocomplete class="inline-input" :popper-append-to-body="false" placeholder="请输入部门" v-model="formI
JS解决子元素浮动或绝对定位造成的父元素高度塌陷问题
Arvin的博客
11-21 2127
当我们在代码中给子元素添加浮动或者绝对定位时，父元素会存在高度塌陷问题，可以使用JS来解决。 首先通过获取子元素的高度，将子元素的高度传给父元素，同时在页面窗口或框架被调整大小时获取子元素高度并传给父元素。代码如下： 子元素.onload = function () { height = this.height; 父元素.style.height = height + "px"; } window.onresize
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
解决高度塌陷的一种常见方法是使用“块格式化上下文”（Block Formatting Context，简称BFC）。BFC是一种渲染规则，它定义了元素内部元素如何布局。创建BFC的元素不会与外部元素发生重叠，并且可以正确地包含其内部...
关于清除浮动塌陷的几种方法总结
09-27
解决浮动塌陷有多种方法： 1. 给浮动元素的父级添加固定高度（`height`）。这是最直观的方法，但往往不实用，因为高度通常由内容动态决定。 2. 使用`clear:both`。在浮动元素后的非浮动元素上设置`clear:both`，...
前端难题：高度塌陷原因及多方法解决
本文将深入探讨高度塌陷产生的条件、具体表现以及多种解决方法。 **高度塌陷产生的条件** 1. **浮动元素影响**：当所有子元素都使用`float`属性浮动时，如`.child_1`和`.child_2`的例子中，它们不再占据其在正常...
使用三种方法，练习使用3种方式解决内容部分父级盒子高度塌陷 1.使用空标记清除浮动 2.使用after伪对象清除浮动 3.使用BFC解决高度塌陷问题
最新发布
03-20
方法3：BFC解决高度塌陷 原理：触发BFC（块级格式化上下文）的渲染规则 实现步骤： 1. 为父级设置任意触发BFC的属性 2. 常用属性：overflow、display、position等 代码示例： ```html .parent { overflow: ...
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
Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题
大家好，我是+V
12-10 5324
Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题 最近有一个
高度塌陷和BFC
m0_56752010的博客
04-22 168
高度塌陷问题： 在浮动布局中，父元素的高度默认是被子元素撑开的， 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。 父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱。 所以高度塌陷是浮动布局中比较常见的一个问题，必须要进行处理。 BFC (Block Formatting Context) 块级格式化环境： -BFC 是一个css中的一个隐含的属性，可以为一个元素开启BFC。开启BFC该元素会变成一个独立的布局区域 -元素开启BFC后的特点
高度塌陷的问题
weixin_41664064的博客
08-21 636
一、JDBC JDBC，即Java Datebase Connection。顾名思义，JDBC用于通过Java连接数据库。 二、JDBC与数据库的连接 三、插入、删除、更新 四、查询
前端基础问题 -- 高度塌陷问题详解(面试重点问题)
兔子juan的博客
09-23 859
高度塌陷： 父元素的高度，默认被子元素撑开，目前来讲son多高，father就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素，导致父元素的高度丢失，就是我们说的高度塌陷问题。父元素一旦高度塌陷，则它下边的元素会向上移动，导致整个页面的布局混乱！ 例如，我们常常想要图一： 但是，输出的总是图二： 原理： 在w3c标准（非IE6以下版本采用的是W3C标准）...
2021-08-20 面试题:你在项目开发的过程中遇到哪些问题?都是如何解决的?
GAARA
08-20 1333
1.2021-06-11 解决异步问题:for循环中的点击事件无法获取自增中的i 2.2021-07-20 解决vue无法在view层实现检测数组更新的问题
2022-09-16 前后端交互方式总结:Promise定义和用法以及基于Promise 接口调用方式:ajax fetch axios async/await
GAARA
09-16 832
文章目录 零.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 692
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、付费专栏及课程。

余额充值