精华内容
下载资源
问答
  • 什么是高度塌陷? 当父元素高度自适应,子元素浮动后,造成父元素高度为0,称为高度塌陷。 高度塌陷怎么解决? 方法一:给父元素一个固定的高度 缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,不推荐...
  • 高度坍塌 css

    2021-01-08 13:46:44
    概述:高度坍塌的根源-常规流盒子的自动高度, 在计算时不会考虑浮动盒子 这时候浮动盒子超出常规流盒子的高度叫 高度坍塌 用css属性 清除浮动(clear) 解决 **清除浮动 clear** - 默认值:none - left:清除左浮动 该...
  • CSS 中父级元素的高度一般由子元素撑开,不会特意设置高度,但是以下情况会造成父级元素高度坍塌,也就是高度为零,影响后面元素的排版。主要有两个原因: )子元素使用绝对定位 )子元素浮动 1)子元素...

    CSS 中父级元素的高度一般由子元素撑开,不会特意设置高度,但是以下情况会造成父级元素高度坍塌,也就是高度为零,影响后面元素的排版。主要有两个原因:

    1. )子元素使用绝对定位

    2. )子元素浮动

    1)子元素使用绝对定位,父元素没设置宽高

     

     此时子元素已从正常文档流中移除,并且不会在页面布局中为该元素创建空间。所以父元素依靠子元素撑起其宽高时会为0;

    解决方案:子元素的绝对定位改为相对定位或者直接去掉。

    改为相对之后页面布局时会为子元素创建相应的空间,此时没设置宽高的父元素也会被子元素撑起来了。

     2)子元素浮动,父元素没设置宽高

    先介绍一下元素浮动

     

    3)浮动有什么用?

     

    4)清楚浮动

    5)子元素浮动会造成父元素大坍塌

     几种解决方案:

     

    展开全文
  • css浮动产生的高度坍塌以及解决高度坍塌的多种方法 (1)给元素添加overflow:hidden; 原理:触发BFC; 弊端:overflow:hidden;还有一个作用就是超出隐藏,  会隐藏掉元素内部定位的元素外部区域   具体...

    css浮动产生的高度坍塌以及解决高度坍塌的多种方法

     

    (1)给元素添加overflow:hidden;

    原理:触发BFC;

    弊端:overflow:hidden;还有一个作用就是超出隐藏,

      会隐藏掉元素内部定位的元素外部区域

      

    具体实现代码如下:

     

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>overflow: hidden</title>

        <style>

            .con{

                width: 700px;

                min-height: 400px;

                background-color: #eee;

                margin: 40px auto;

                overflow: hidden;

            }

            .con .box{

                width: 200px;

                height: 100px;

                margin: 10px;

                background-color: #ccc;

                float: left;

            }

        </style>

    </head>

    <body>

        <div class="con">

            <div class="box">1</div>

            <div class="box">2</div>

            <div class="box">3</div>

            <div class="box">4</div>

            <div class="box">5</div>

            <div class="box">6</div>

            <div class="box">1</div>

            <div class="box">2</div>

            <div class="box">3</div>

        </div>

    </body>

    </html>

     

    (2):使用clear:both清除浮动;

    原理:给元素内部浮动元素添加一同级空的标签,给该空标签设置clear:both(忽略上方浮动元素留出的空间),使用该空标签不受上面元素浮动导致的高度坍塌。

    弊端:反复添加空的标签,会形成代码的冗余。

       

    具体实现代码如下:

     

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>clear:both</title>

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            .con{

                width: 700px;

                background-color: #eee;

                margin: 40px auto;

            }

            .con .box{

                width: 200px;

                height: 100px;

                margin: 10px;

                background-color: #ccc;

                float: left;

            }

            .con_bottom{

                clear: both;

                background-color: crimson;

                height: 5px;

            }

        </style>

    </head>

    <body>

        <div class="con">

            <div class="box">1</div>

            <div class="box">2</div>

            <div class="box">3</div>

            <div class="box">4</div>

            <div class="box">5</div>

            <div class="box">6</div>

            <div class="box">1</div>

            <div class="box">2</div>

            <div class="box">3</div>

            <div class="con_bottom"></div>

        </div>

    </body>

    </html>

     

    (3)万能清除法

    原理:使用css伪元素给元素添加内容,通过控制所添加内容来撑开整个空间,不用添加过多的空标签。

    弊端:不好意思没有缺点和弊端

        

     

     

    具体实现代码如下:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>clear:both</title>

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            .con{

                width: 700px;

                background-color: #eee;

                margin: 40px auto;

            }

            .con .box{

                width: 200px;

                height: 100px;

                margin: 10px;

                background-color: #ccc;

                float: left;

            }

            .con::after{

                content: "";

                clear: both;

                display: block;

                height: 0;

                overflow: hidden;

                visibility: hidden;

            }

        </style>

    </head>

    <body>

        <div class="con">

            <div class="box">1</div>

            <div class="box">2</div>

            <div class="box">3</div>

            <div class="box">4</div>

            <div class="box">5</div>

            <div class="box">6</div>

            <div class="box">1</div>

            <div class="box">2</div>

            <div class="box">3</div>

        </div>

    </body>

    </html>

    如果感觉对自己有帮助,麻烦点一下关注,会一直和大家分享知识的,谢谢!!!

    展开全文
  • 以前布局经常会用到float进行布局,但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌 那我们一起来探究一下解决这个问题的方法!就先从文档流开始吧 一.定位的分类 普通流定位 浮动定位 相对定位 ...
  • 什么高度塌陷?

    2020-02-25 00:11:42
    首先要知道高度塌陷是:浮动元素父元素高度自适应(高度塌陷)当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷 简而言之就是但子元素设置浮动属性,父元素就会...

    首先要知道高度塌陷是:浮动元素父元素高度自适应(高度塌陷)当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷
    简而言之就是但子元素设置浮动属性,父元素就会出现高度自适应,没有高度或者高度很小,例如:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                border: 1px solid red;
            } 
            .frist {
                width: 200px;
                height: 50px;
                border: 1px solid green;
            }
            .box1 {
                width: 200px;
                height: 80px;
                background: silver;
            }
        </style>
    </head>
    <body>
        <div class="box">
         box
            <div class="frist">frist</div>
        </div>
        <div class="box1">box1</div>
    </body>
    </html>

    此时,是三个div块级标签显示在页面上
    在这里插入图片描述
    box、frist、box1三个div都有自己的空间放置其他元素,frist是嵌套在box里面的。但是当frist左浮动在box里时就会出现高度塌陷的情况

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                border: 1px solid red;
            } 
            .frist {
                width: 200px;
                height: 50px;
                float: left;
                border: 1px solid green;
            }
            .box1 {
                width: 200px;
                height: 80px;
                background: silver;
            }
        </style>
    </head>
    <body>
        <div class="box">
         box
            <div class="frist">frist</div>
        </div>
        <div class="box1">box1</div>
    </body>
    </html>

    在这里插入图片描述
    这个时候frist是box的子元素,box是父元素,当子元素frist添加浮动时,父元素box就会出现高度塌陷的情况,父元素里的内容会被挤到子元素后边。简而言之就是自己决定不了自己的家有多高,只能跟着房子里家居的高度调整自己的高度。
    这就是高度塌陷的表现方式,下面我们来聊聊如何解决这个高度塌陷的问题
    方法一:给父元素添加声明overflow:hidden;(触发一个BFC)

    overflow: hidden;

    方法二: 在浮动元素下方添加空div,并给该元素添加声明div{clear:both; height:0; overflow:hidden;} (这样会多一个空的div增加代码长度)

        .k{clear:both; height:0; overflow:hidden;}
        <div class="k"></div>

    方法三:添加CSS样式中伪元素after(格式如下,有些复杂)

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

    方法四:给父元素添加浮动(方便简洁,不是很规范)

     float: left;

    在最后说一句个人比较推荐解决高度塌陷的方法是给父元素添加声明overflow:hidden;

    展开全文
  • 高度坍塌的根源是:常规流盒子的自动高度在计算时,不会考虑浮动盒子 清除浮动 给父元素一个固定的高度 (不建议使用,不够灵活) 子元素浮动的时候,会在其内部创建一个新的bfc,此时,父元素的处于html这个根...

    高度坍塌的根源是:常规流盒子的自动高度在计算时,不会考虑浮动盒子

    清除浮动

    1. 给父元素一个固定的高度
      (不建议使用,不够灵活)
      在这里插入图片描述

    子元素浮动的时候,会在其内部创建一个新的bfc,此时,父元素的处于html这个根元素的渲染区域,然后子元素创建了新的bfc,也处于根元素的渲染范围下,此时父元素和子元素的关系可以说只是视觉上的,并没有更深的联系
    在这里插入图片描述

    body只有0

    1. 给父元素添加属性overflow:hidden;
      原理是利用overflow:hidden;创建了一个新的bfc,在新的bfc里面,自动高度会计算浮动元素的高度,于是有了这种解决高度坍塌的方法
      缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。可能会和我们想得到的预期效果不一样
      在这里插入图片描述

    就像这张图,想要得到的文字部分为隐藏

    1. 给父元素设置伪元素选择器,并设置常用的清除浮动的样式,然后after就会把盒子撑开
     .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    

    想要注意的是一定要设置display: block;,因为after默认是行盒

    1. 在子元素的末尾添加一个空的 div ,并设置相应的清除浮动样式
      简单来说就是盒子套盒子,用这个空的div代替方法3的after,这样不好,因为直接增加了缓冲压力,会让代码无意义的变长

    2. 双伪元素清除浮动法
      完全将浮动元素闭合在父元素里面,形成闭环系统,通俗来说就像是闭门关窗男女混合双打

    .clearfix::after,.clearfix::before{
                content: "";
                display: table;
                /* 让before和after在一行上显示 */
            }
            .clearfix::after{
                clear: both;
            }
    
    展开全文
  • 关于高度坍塌

    2016-10-13 09:34:38
    当父元素未设置高度和宽度的时候,子元素浮动时,那么父元素的高度就会塌缩为零,前提是它只包含浮动元素,解决高度塌陷的问题很简单,可以浮动父级元素、清除法等等,均可实现。下面一一为大家稍微解说一下。首先来...
  • 高度塌陷的产生原因及解决方法

    千次阅读 2020-02-23 17:23:53
    什么是高度塌陷? 当父元素未设置高度时,所有子元素浮动后,造成子元素脱离文档流进而无法把父元素撑开,父元素高度为0产生高度塌陷,称为高度塌陷问题。 父元素高度塌陷后,父元素以下的元素都会向上移动,导致...
  • 什么会产生高度坍塌: 父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度...
  • 如何清除高度坍塌

    2021-06-23 19:19:30
    高度坍塌概念 父元素没有设置高,高度自适应,子元素浮动后,造成父元素高度为0,成为高度坍塌 图一 父元素没有设置高度,靠子元素撑开 <!DOCTYPE html> <html> <head> <meta ...
  • 通常在这种自适应的页面中,布局通常会用到浮动,让子元素浮动起来,可以在同一排显示,但是子元素浮动后会脱离文档流,这会导致其父级失去高度,从而造成高度坍塌的问题。 如下图:由于子元素现在为空,所以父级ul...
  • html+css解决高度坍塌问题

    千次阅读 2019-03-14 16:04:06
    在文档流中,父元素的高度默认是被子元素撑开的, 也就是子元素多高,父元素就多高。 但是当为子元素设置浮动以后,子元素会完全脱离文档流, 此时将会导致子元素无法撑起父元素的高度,导致父...
  • 如果子元素浮动,那么父元素高度不再被子元素撑起,出现高度坍塌 高度坍塌: 解决: 在父元素的第一个子元素的位置,加一个空的块元素,并且设置clear:both,来清楚兄弟元素浮动后对他的影响。 这样原来子元素...
  • 1.给父元素一个固定的高度;(在父元素可以有固定高度的情况下) 2.给父元素添加浮动属性;(在父元素确实需要浮动的情况下) 3.BFC:给父元素添加{overflow:hidden/auto;}属性;(如果子元素需要定位,溢出部分会...
  • 一、什么是高度坍塌 一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0...
  • 清除浮动解决高度坍塌的5种方法 以及兼容IE 文章目录清除浮动解决高度坍塌的5种方法 以及兼容IE一、高度坍塌的形成原因以及代码和效果演示二、解决办法方法1:定义一个样式使用伪类元素选择器 ::after方法2:给父元素...
  • 高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子。 概念可能有点生硬,我们用代码来解释: 我们执行以下代码: 得到的结果是这样的,这是这个正常的常规流盒子 这个时候我们再...
  • (一)什么是盒子坍塌(高度坍塌) 本应该在父盒子内部的元素跑到了外部 高度坍塌也就是在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全...
  • 高度坍塌的根源 常规流盒子的自动高度,在计算时,不会考虑浮动盒子 如果父盒子没有给高度,但是里面的子元素浮动,或者绝对定位,固定定位,都会使这个子元素脱离文档流,使父元素不能够获取元素的高,也就是不能...
  • css3 **1.** 使用clear:both **2.** 使用after伪元素 **3.** 给父元素添加overflow:hidden 方法一 //给父元素添加声明 overflow:hidden; 缺点:会隐藏溢出的元素;...在浮动的元素下添加空div标签,并给该元素添加声明...
  • CSS中之高度坍塌及解决办法

    千次阅读 2019-08-14 23:02:32
    高度坍塌什么 高度坍塌:在流式布局中十分常见。当父元素没有高度,子元素设置了float时。 原因:子元素脱离文档流,无法撑开父元素 高度坍塌的’症状’: <div class="content"> 123 <div class=...
  • 解决高度坍塌的办法

    2020-03-18 22:20:55
    解决高度坍塌的办法 上一次,我们介绍了解决高度坍塌的一种办法,下面我们系统列举了解决高度坍塌的方式,欢迎各位看官试一试嚯! 谢谢大家的支持,一起进步吧 ...
  • 什么是高度塌陷 当父元素没有设置高度时,此父元素里面的子元素又添加了浮动属性,此时会出现高度塌陷。 二 高度塌陷的原理 出现高度塌陷的元素中,它的子元素添加了浮动,因为浮动不占据空间,脱离了文档流,这...
  • 1、’什么是文档流? &amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp;在html中,文档流也可以叫做标准流或普通流。元素的显示方式是自上而下,从左到右,其中,块级元素默认占据一行...
  • 清除浮动主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题,而这两个问题分别对应了需要清除浮动的两种种情况:清除前面兄弟元素浮动和闭合子元素浮动(解决父元素高度坍塌)。...
  • CSS 中的高度坍塌

    2018-04-11 16:54:04
    首先,抛出一段代码引出本篇的主题:CSS 中的高度坍塌。 ps:代码可以复制出去运行哦~ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ...
  • 当父元素中的子元素设置了float属性时,可认为子元素就跳出了父...要解决这个问题,人为给父元素设置高度是不现实的,因为一般父元素的高度是由子元素决定的,为此我们可以从父子元素两个角度出发,用两种思路解...
  • 根源:常规流块盒在记录高度时会无视浮动盒子 产生条件: 没有固定高度 的父元素里有浮动元素 时

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,699
精华内容 1,879
关键字:

高度坍塌是什么