精华内容
下载资源
问答
  • CSS中之高度坍塌及解决办法

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

    高度坍塌是什么

    高度坍塌:在流式布局中十分常见。当父元素没有高度,子元素设置了float时。
    原因:子元素脱离文档流,无法撑开父元素

    高度坍塌的’症状’:

        <div class="content">
            123
            <div class="content-middle">
                高度坍塌问题
            </div>
            <div class="content-left">left</div>
        </div>
        //下面是CSS代码
        .content-middle{
            float: left;
            width: 100px;
            height: 100px;  
            margin: 20px;
        }
        .content{
            margin: 20px;
        }
    

    运行
    运行结果
    发生了什么?

    • 与父元素高度margin重叠(水平没受影响)
    • 被leftDIV无视,占用位置
    • 无法撑开父元素的高度

    这肯定不是我们想看到的情况!

    怎么解决?

    我这里只提供最优解决办法

    .content:after{
            clear: both;
            content: '';
            display: block;
            height: 0;
        }
    .content-middle{ *zoom:1; } //兼容ie触发hasLayout
    

    使用CSS伪类选择器在其后添加一个新的’content’
    并设置display: block;height: 0;clear: both;
    缺一不可
    优点:不用加一个div给加大浏览器负担,避免better-scroll不能使用(高度写死),不用担心overflow:hidden隐藏的问题

    效果:

    效果
    问题没解决 或者想与我讨论有关问题 私聊我!

    展开全文
  • ,我自己试了试发现只要取消掉div.nav-list 的display:inline-block 就会发生高度坍塌。我查了一下第三版的权威指南,浮动元素的包含块就是最近的块级祖先,那么不理应坍塌么。 下面代码。 ![图片说明]...
  • 一、什么是高度坍塌 一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0...

    一、什么是高度坍塌

    一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0


    二、解决方案

    1. 为父元素添加声明overflow: hidden

    【原理】详见BFC四、2

    【缺点】不能和position定位配合使用,超出的尺寸会被隐藏

    2. 在浮动元素下方添加空div,并给元素声明clear:both

    【原理】写入了clear: both的元素不允许周围有浮动的元素产生,所以浮动子元素对空div失去了浮动的效果,浮动子元素对于空div来说就有了高度,空div就撑起了父元素的高度

    【缺点】需要添加多余的空标签并添加属性

    3. 为浮动元素添加::after伪类
    /* box为浮动元素 */
    .box::after{
        content: "";
        display: block;
        clear: both;
        
        /* height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 */
        height: 0;	
        overflow: hidden;
        
        /* visibility:hidden;为了去隐藏content中的内容 */
        visibility: hidden;
    }
    

    不会影响其他任何样式,通用性强

    4. 让父元素也浮动

    【缺点】会产生新的浮动问题

    展开全文
  • (一)什么是盒子坍塌(高度坍塌) 本应该在父盒子内部的元素跑到了外部 高度坍塌也就是在文档流中,父元素的高度默认被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全...

    (一)什么是盒子坍塌(高度坍塌)
    本应该在父盒子内部的元素跑到了外部
    高度坍塌也就是在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
    (二)举个例子
    在这里插入图片描述

    代码:`

    Document
    外部盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    浮动流盒子
    `

    (三)解决办法
    (1)推荐:在坍塌的盒子也就是父元素下面加个 ::after 伪类

    /* .clearfix::after{
                content: "";
                display: block;
                clear: both;
                
            } */
    

    效果:
    在这里插入图片描述
    这是一种纯CSS的解决浮动造成盒子塌陷方法,没有引入任何冗余元素,推荐使用此方法来解决CSS盒子塌陷。
    (2)可以在浮动流盒子下面加个新的常规流盒子,clear属性:both也是可以的

    展开全文
  • 解决高度坍塌问题

    2020-08-11 17:27:00
    一、什么是高度塌陷? 通过下面的例子了解什么是高度塌陷。 在页面中设置一个盒子box,其中在嵌套一个子元素小盒子box1。box设置边框宽度,而高度不去设置(高度会由内容撑开) 但是当我们向盒子里面添加内容的时候...

      我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题。

    一、什么是高度塌陷?

    通过下面的例子了解什么是高度塌陷。

    在页面中设置一个盒子box,其中在嵌套一个子元素小盒子box1。box设置边框宽度,而高度不去设置高度会由内容撑开

    但是当我们向盒子里面添加内容的时候<div class="box1">a</div>,就可以发现父元素被撑开了。

    在文档流定位中父元素的高度默认是被子元素撑开的高度。即子元素的高度就是父元素的高度

    当为父元素中的子元素设置了向左浮动时。比如说为box1设置向左浮动。就会发现子元素的位置没变,但是父元素box发生了高度坍塌。

    得出结论当为子元素设置浮动的时候,子元素就会完全脱离文档流,此时将会导致子元素无法撑开父元素,导致父元素的高度塌陷

    当再在父元素之下设置一个盒子box2,为box2设置高度80px和背景颜色。

    按理来说正常情况下,按照文档流排列,会是box的边框包裹着box1,box2在二者下方,如图一所示。

    为box1设置浮动定位后,box1会脱离文档流,如上所示父元素随即会出现高度塌。这时候,box2盒子也会向上移动,造成布局混乱。如图二所示。

    高度塌陷所造成的后果:由于父元素的高度塌陷,就会导致父元素之下的所有元素都会因此而向上移动,这样会导致页面混乱。不利于页面布局

                          


     

     解决高度坍塌问题:

    方案一:直接为父元素指定高度,假设子元素是200px,那么就为父元素的高度也设置为200px;以避免塌陷问题的出现。

    缺点:一旦指定父元素的高度为一个固定值。父元素的高度不会自动适应子元素的高度,所以这种解决方法不推荐使用。

     

    我们了解完高度坍塌问题之后,那么如何去解决高度坍塌问题呢?

    解决高度问题的方法一:

    解决问题的原理:根据W3C标准,元素都有一个隐含的属性(Block Formatting Context)简称BFC,块级格式化环境,该属性可以设置打开或是关闭,当开启BFC后,元素将会具有如下特性:

    1.父元素的垂直外边距不会和子元素重叠。

    2.开启BFC的元素不会被浮动元素覆盖。

    3.开启BFC的元素可以包含浮动的子元素。

     如何开启BFC(并没有直接开启BFC的方法,但是在操作的过程中可以通过一些间接的元素设置开启浮动)

    1.设置元素浮动

    当子元素box1设置了浮动定位的时候,同时也给父元素box也设置浮动定位。结果发现虽然父元素的高度被撑开了,但是如果没有设置宽度,原有的默认占据一行的宽度就失效了(宽度变成被子元素撑开的元素了),而box2盒子依旧往上移动了。不推荐使用

     

    2.设置元素绝对定位

    给父元素设置绝对定位后,原有的默认宽度失效(变成被子元素撑开的宽度了),box2盒子依旧向上移动。不推荐使用

    3.设置元素inline-block

    子元素box1 保持float:left 的浮动定位,为父元素box设置display:inline-block变成行内块元素,box2盒子不再上移,但是原有的默认宽度失效(变成被子元素撑开的宽度)不推荐使用

     

    4.将元素的over-flow(超出部分)设置成一个非visible的值

    回忆over-flow属性的值有visible(默认值)、hidden、scroll、auto。非visible的值有hidden、scroll、auto

    首先尝试一下把box父元素设置为 overflow:scroll;宽度被保留了下来,高度也被子元素撑开,box2盒子也没有趁机上移,页面布局也很完美。但是scroll属性值带有的滚动条却很碍眼。尝试其他属性值试试。

    设置父元素属性overflow: auto;效果完美

    父元素overflow: hidden;

     

     推荐方式:将overflow设置为hidden开启BFC最简便的方式,解决overflow最简便的方式就是设置overflow:hidden;

    浏览器兼容:这样设置,Chrome浏览器支持,Firefox浏览器支持,IE浏览器IE6版本及以下的浏览器不支持这种设置。所以使用这种方式不能兼容IE6及其以下的版本。

    在IE6中虽然没有BFC,但是有另一隐含属性hasLayout,如果想开启hasLayout,直接设置元素zoom为1即可。(zoom:表示放大,后面跟着放大倍数的数值;zoom:1表示不放大)zoom只在IE浏览器中支持,其他浏览器都不支持。

    如果下想同时兼容所有版本的浏览器可以两种方式都写,既有overflow又有zoom。


     

    解决高度塌陷结局方法之二

    在了解这个方法之前,先来简单回顾一下clear属性(只能清除兄弟元素的影响,不能清除父元素的影响)

    clear清除属性的取值:

    none:不清除浮动;

    left:左侧不允许出现浮动,清除左侧浮动元素对当前元素产生的影响;

    right:右侧不允许出现浮动,清除右侧浮动元素对当前元素产生的影响;

    both:清除对元素影响最大的浮动。

    清楚了clear属性清除的用法之后,就可以运用到解决高度塌陷。

    当为父元素中的子元素设置了向浮动时。为box1设置向左浮动。就会发现子元素的位置没变,但是父元素box发生了高度坍塌

     

     

    为box1盒子的兄弟元素box2 设置clear属性

     

    解决高度塌陷方案二

    优点

    可以直接在高度塌陷的父元素最后添加一个空白的div,由于这个div并没有设置浮动,所以他可以撑开父元素的高度的。

    再对其进行清除浮动(clear),通过这样可以通过这个空白的div来撑开父元素的高度。

    相比于上面的使用overflow属性清除浮动,更加建议使用此方案,副作用相对而言更少(基本没有),而且可以兼容所有的浏览器。

    缺点

    因为div属于HTML元素,HTML属于结构部分,所以使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。

    假如既不想添加结构,又希望可以解决高度塌陷问题

    解决办法通过after伪类,选中box父元素的后边

    可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动。这样做和添加div原理一样,可以达到一个相同的效果。

    而且不会在页面添加多余的div(结构),最推荐使用的方式,几乎没有副作用。

     

     


     

    使用clearfix属性,清除修复。

    给box添加一个clearfix的属性

     设置clearfix属性值,其中最为关键的三点是

    这是最推荐使用的一种方式。但是在IE6中不支持 :after伪类。如果想在IE6中显示开启hasLayout,设置zoom:1。

    文章来源于:https://www.cnblogs.com/nyw1983/p/11374358.html     https://www.cnblogs.com/nyw1983/p/11374405.html

    展开全文
  • 什么是高度塌陷 当父元素没有设置高度时,此父元素里面的子元素又添加了浮动属性,此时会出现高度塌陷。 二 高度塌陷的原理 出现高度塌陷的元素中,它的子元素添加了浮动,因为浮动不占据空间,脱离了文档流,这...
  • 一、什么是高度塌陷? 通过下面的例子了解什么是高度塌陷。 在页面中设置一个盒子box,其中在嵌套一个子元素小盒子box1。box设置边框宽度,而高度不去设置(高度会由内容撑开) 但是当我们向盒子里面添加内容的...
  • 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别新手不知道什么地方该如何命名,怎样命名才好的方法。 一、命名规则说明 1、所有的命名最好都小写 2、属性的值一定要用双引号("")括起来...
  • 1、’什么是文档流? &amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp; &amp;amp;nbsp;在html中,文档流也可以叫做标准流或普通流。元素的显示方式自上而下,从左到右,其中,块级元素默认占据一行...
  • 问题:对于固定定位的元素,固定住高度,后面紧跟的模块...2.这个方法百度百科手机页面用的,先为固定定位元素设一个父元素,不设高度,不设宽度,什么都不设,他的第一个子元素我们需要做固定定位的元素,这个...
  • 前言前几天某个群友在群里问了一道面试题,...(本文大多采用的讲解方式为 w3 的 CSS 标准 + MDN,如果对标准比较熟悉的大神请跳过这篇文章)❝通过标准分析有什么好处?最权威的解答,能够少走弯路,不会出错。❞代码...
  • 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个...
  • 清除浮动主要为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题,而这两个问题分别对应了需要清除浮动的两种种情况:清除前面兄弟元素浮动和闭合子元素浮动(解决父元素高度坍塌)。...
  • 原因:子元素加上float,父元素高度坍塌(我也想不通坍塌为什么会下移)总之要么给父元素足够的高度,或者用其他原因撑开高度 通用的四种方法如下: (1)给父级元素添加一个高度(不推荐)  此方法中高度无法确认...
  • [html] 对一个元素设置浮动后,它的... 浮动元素会造成父元素的高度坍塌 个人简介 我歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
  • 1.什么是场景下会出现元素高度塌陷:当子元素有浮动,父元素没有设置高度的时候,父元素会出现高度坍塌。注:加了浮动的子元素不会撑开父元素的高(height)或者最小高度(min-height)。2.如何解决高度塌陷呢?目前...
  • 5.BFC的应用场景5.1 清除浮动(高度坍塌)5.2 防止外边距折叠5.3 防止外边距坍塌5.3 自适应两栏布局 1.什么是BFC? BFC(Block formatting context)直译为"块级格式化上下文"。它一个独立的渲染区域, 它规定了内部...
  • 谈谈如何实现BFC,以及BFC到底是什么? 定义block formating context 块格式化上下文 ,首先我们要知道这是在布局的时候遇到的问题, ...高度坍塌的问题,子元素浮动在“VIP上层文档流”,父元素无法检测到子元素的高
  • 答: 浮动有哪些特点: 1.2-1脱离文档流,不占据空间,多个元素排列在一行! 1.2-2向左或者向右浮动,直到遇到父元素或者其他浮动的...1.2-3造成父元素高度坍塌, 如何解决详见1.1标题BFC 更多内容请➕ CXXY615807 ...
  • BFC——通俗理解什么是BFC

    千次阅读 2020-04-22 06:38:56
    文章目录常规流布局BFC的概念BFC的创建BFC的特性BFC的应用解决高度坍塌的问题相邻父子元素外边距合并问题无视浮动盒子排序问题总结 在理解BFC之前,我们需要先回顾常规流布局的概念(忘记或者还没看的小伙伴点击前端...
  • 解决高度塌陷的问题 – 清除浮动

    千次阅读 2010-04-19 13:58:00
    CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题。...所以呢,并不只要有浮动元素就会坍塌,就要清除的,CSS水平高低衡量的标准之一就是改用什么样式
  • 那为什么背景颜色没有显示出来呢,很简单,就是因为浮动元素在正常的文档流中不占位置的,所以自然对于父元素来说,子元素就像不存在它的容器内,那自然就没有高度拉! 这时候父元素的高度为0;于是解决方法1.使父...
  • float的定义: 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级...为什么父元素会坍塌? 这因为内部的DI
  • 清除浮动

    2018-06-23 14:48:00
    1.什么是高度坍塌?简单来说就是包含有浮动元素的上一级元素(即父级元素)高度变为0了。下图有浮动元素的父级元素border设置为绿色,但是高度变为了0. 高度坍塌 为包含浮动元素的父级元素: ...
  • 不过,由于float会导致浮动元素的父元素高度坍塌,所以,这时候就要去清除浮动 如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法...
  • 但最后为了解决几个块级元素并排显示问题,虽然可以使用定义块级元素的display为inline-block(这种方式也不会出现父级元素坍塌问题)但是这种方式不能控制元素的位置而是默认从左到右,所以要实现元素居左还是...
  • 前端面试整理

    2019-11-24 12:28:41
    2.什么是高度坍塌 在文档流中,父元素的高度默认由子元素撑开的,但是我们把子元素设置为浮动后,子元素完全脱离文档流,此时子元素无法撑起父元素的高度,导致父元素高度坍塌。 3.高度坍塌的解决方法(清除浮动...
  • 清除浮动的八种方法

    2018-01-07 20:00:31
    什么清除浮动:浮动会导致父元素高度坍塌,因为浮动脱离文档流,浮动以后不占文档流的位置,撑开的父元素高度肯定会坍塌。 清除浮动的八种方法: 1、父级div给出固定的高度。手动定义height,这样就解决了父级元素...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

高度坍塌是什么