高度坍塌及解决

最新推荐文章于 2023-06-28 20:20:31 发布
最新推荐文章于 2023-06-28 20:20:31 发布
阅读量68 收藏 1
点赞数 2
文章标签： css html vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53002615/article/details/122536862
版权

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            background-color: blanchedalmond;
            width: 500px;
            padding: 20px;
            
        }
        .d2{
            background-color: red;
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
    </div>
</body>
</html>

页面显示效果：

我们可以看到，第一个div的高度为0 

产生原因：常规流盒子的自动高度（由内容而定），在计算时，不会考虑浮动盒子。

解决办法：清除浮动，使用clear属性，其值可为left，right，both，默认为none

1、写一个div 放最后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            background-color: blanchedalmond;
            width: 500px;
            padding: 20px;
            
        }
        .d2{
            background-color: red;
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>

2、伪元素选择器::after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            background-color: blanchedalmond;
            width: 500px;
            padding: 20px;
            
        }
        .d2{
            background-color: red;
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid;
            margin: 10px 10px;
        }
        .clear-fix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="d1 clear-fix">
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
    </div>
</body>
</html>

页面显示效果：

 在使用浮动时，经常会遇到高度坍塌，一定要记得清除浮动。

叁五程序员
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
z-index定位方法
m0_55041880的博客
07-21 203
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
css3 响应式布局：div 内的方格元素响应式布局，无论浏览器怎么缩放，都保持比例不变，会浏览器窗口变小，元素会自动换行。不会出现元素挤压变形的情况，怎么做？
wcdunf的博客
05-12 912
在以上代码中，当屏幕宽度小于 600px 时，元素每行只显示两个，并且每个元素占据 50% 的宽度，可以根据实际需求进行调整。查询可以根据不同的屏幕宽度设置不同的显示效果，使得页面在不同大小的屏幕上都能够合理地显示，并且具有良好的可读性和用户体验。实现 div 内的方格元素响应式布局，可以使用 CSS3 的。
flex布局下，盒子被挤压时如何解决
m0_70547044的博客
05-06 1567
flex-shrink 属性指定了 flex 元素的收缩规则，默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候，元素会发生收缩，其收缩的大小的依据是 flex-shrink 值。子元素的宽度之和为 100+100+300+300=800px，每个子的默认flex-shrink值是1。当父容器被压缩到小于800px的时候，比如压缩到560px时，里面的子元素也会被相应地压缩。各个子元素被压缩掉多少宽度呢？
高度塌陷问题和解决高度塌陷问题
你好牛蛙！
10-25 2221
什么是高度塌陷 在文档流中，父元素的高度默认是由子元素撑开的，等于说子元素多高，父元素就多高，但是当为子元素设置了浮动之后，子元素会脱离文档流，此时，将会导致子元素无法撑起父元素的高度，会导致父元素的高度塌陷 高度塌陷会导致的问题 会使父元素下面的兄弟元素都想上移动，会使页面布局变化，影响原来的布局 未塌陷之前 塌陷之后： 解决高度塌陷问题 第一种： 直接设置父元素的高和宽，使其固定 不方便，不推荐，这样设置父元素的高度不会适应子元素的高度 第二种 用Block Formatting Context简称
‘html内容盒子缩小页面时被挤到下面了’的解决方法
m0_49315169的博客
04-21 6929
‘html内容盒子缩小页面时被挤到下面了’的解决方法 1.问题描述 在编写页面的时候，有时会出现页面挤到另一行的情况。 这里我们可以做一个示例，定义两个盒子让他们都左浮动。 如下所示： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> *{ margin: 0;
高度坍塌 css
01-08
概述:高度坍塌的根源-常规流盒子的自动高度, 在计算时不会考虑浮动盒子 这时候浮动盒子超出常规流盒子的高度叫 高度坍塌 用css属性 清除浮动(clear) 解决 **清除浮动 clear** - 默认值:none - left:清除左浮动 该...
css解决浮动导致父元素高度坍塌的几种方法
11-21
以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌 那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧 一.定位的分类 普通流定位 浮动定位 相对定位 ...
什么是高度塌陷 以及高度塌陷的解决办法
01-08
高度塌陷怎么解决？ 方法一：给父元素一个固定的高度 缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。 方法二：给父元素添加属性 overflow: hidden; 优点：浏览器支持好，简单； 缺点：当子...
坍塌事故应急救援演练方案范文
03-26
坍塌事故应急救援演练方案
坍塌倒塌事故应急预案.doc
04-25
我部承建的****工程（K0+000～K54＋946.424）段、机电、交安、绿化及房建工程，位于陕西省****和****境内，长度为54.946公里，为高速公路，地形平缓。 6 周边环境、社区情况 本段地势平坦，线路在204省道、神延铁路...
高度坍塌及其解决方案
CSDN
04-06 433
一、什么是高度坍塌 一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。 二、解决方案 1. 为父元素添加声明overflow: hidden 【原理】详见BFC四、2 【缺点】不能和position定位配合使用，超出的尺寸会被隐藏 2. 在浮动元素下方添加空div，并给元素声明clear：both 【原理】写入了clear: both的元素不允许周围有浮动的元素产生，所
高度坍塌的几种解决方法
charlize_wen的博客
02-23 1806
一 什么是高度塌陷 当父元素没有设置高度时，此父元素里面的子元素又添加了浮动属性，此时会出现高度塌陷。 二 高度塌陷的原理 出现高度塌陷的元素中，它的子元素添加了浮动，因为浮动不占据空间，脱离了文档流，这时候父元素又没有设置高度，此时父元素的高度没有被撑开，就是我们常说的元素“高度坍塌”问题。 三 高度坍塌解决方法 方法一： 1.给出现高度坍塌的元素添加overflow：hidden属性。 2.原...
高度塌陷的产生条件和解决方法
qq_45604710的博客
02-23 1606
高度塌陷的产生条件和解决方法 1.首先提到高度塌陷就必须提到一个css属性：float–浮动 float顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，可以让任何竖着排列的标签横过来，我们称设置了float属性的元素为浮动元素。 即如图所示： Html代码如下: css代码如下： 效果图： 2.什么是高度塌陷 通过下面的例子了解什么是高度塌陷。 在页面中设置一个盒子b...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
专研前端，探索后端
04-16 670
盒子模型（Box Model）： 指把HTML页面中的元素看作是一个矩形的盒子，也称容器，这个盒子从内到外由：元素的内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。 内容content： 指文本等内容的大小，width和height设置内容的大小，并非包含边框border和内边距padding的值，因此设置其它两项，容器的实际大小会改变。设置其它两项后，经常会出现盒子被撑开的问题，其中一种解决方法就是修改width和height，结合下面内边距设置属性值
盒子模型塌陷解决办法
赵佳敏的博客
10-27 2167
一、盒子模型塌陷 当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。 例如这种情况： <style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: tomato; } ..
CSS盒子模型——高度塌陷问题
zg0601的博客
10-19 504
盒子模型三种高度塌陷问题
CSS盒子塌陷以及解决办法
最新发布
weixin_58545784的博客
06-28 1931
情况一：当子元素设置外边距，导致父元素连带向下，这就导致盒子模型塌陷 情况二：当父元素未设置高度，此时父元素的高度取决于子元素的高度，当子元素设置浮动后，会脱离文档流，造成子元素的内容在父元素外出现。 脱离文档流：在HTML中块级元素一个一排自上往下堆放，行内元素自左往右堆放，而脱离文档流就是不遵循这套标准，元素于元素之间开始堆叠。
盒子模型、外边距、内边距、塌陷问题的解决办法
weixin_48127010的博客
09-11 876
盒子模型 盒子模型盒子模型内边距设置上下左右外边距外边距外边距合并外边距塌陷解决方案：块元素水平居中 盒子的大小：border + padding +content组成 内边距 盒子模型的内边距padding，当盒子设置内边距之后，会撑大盒子的尺寸，为了保证盒子的尺寸不变，就要给盒子减去padding区域的尺寸 设置上下左右外边距 单属性： padding-left:px; padding-right:10px; padding-top:10px; padding-bottom:10px; 复合属性： 设
hbuilder3个盒子防止高度坍塌
05-19
在HBuilder中，我们可以使用Flex布局来防止高度坍塌。具体方法如下： 1. 在父容器上设置display: flex;属性，开启Flex布局。 2. 设置flex-direction: column;属性，使子元素从上到下排列。 3. 将中间的盒子设置为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值