【CSS解决页面高度塌陷问题】

꒰ঌsnail໒꒱

已于 2022-04-27 22:20:01 修改

阅读量1.3k

点赞数 2

分类专栏： css 文章标签： css

于 2022-04-27 22:07:32 首次发布

本文链接：https://blog.csdn.net/m0_46839072/article/details/124455678

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

高度塌陷问题描述

1、页面高度塌陷问题
1.1、清除浮动本质
1.2 、清除浮动的方法
1.3、一个常用布局框架实例

1、页面高度塌陷问题

(1)产生原因

我们都知道当元素浮动后，可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。如果没有设置高度，那么包含框父元素默认是被子元素撑开的，当子元素设置浮动后，子元素会脱离文档流，父元素不被子元素撑开，就会出现父元素的高度塌陷问题；

(2)正常标准流盒子

子盒子是标准流，父盒子没有高度，但是会被撑开高度。
①代码如下：

<style>
    .s{
        width:700px;
        background-color: antiquewhite;
        border: solid 3px red;
    }
    .s1{
        width: 200px;
        height:100px;
        background-color: aqua;
        text-align: center;
        line-height: 100px;
    }
    .s2{
        width: 150px;
        height:200px;
        background-color:blueviolet;
        text-align: center;
        line-height: 200px;
    }
    .s3{
        width:250px;
        height: 150px;
        background-color: chartreuse;
        text-align: center;
        line-height: 150px;
    }
</style>
  <body>
    <div class="s">
    <div class="s1">1</div>
    <div class="s2">2</div>
    <div class="s3">3</div>
    </div>
</body>

②页面如下：
在这里插入图片描述

(3)子盒子浮动

子盒子浮动，脱离标准流，父盒子没有高度，高度为零，不会被撑开盒子。
①代码如下：

<style>
    .s{
        width:700px;
        background-color: antiquewhite;
        border: solid 3px red;
    }
    .s1{
        width: 200px;
        height:100px;
        background-color: aqua;
        text-align: center;
        line-height: 100px;
        float:left;
    }
    .s2{
        width: 150px;
        height:200px;
        background-color:blueviolet;
        text-align: center;
        line-height: 200px;
        float:left;
    }
    .s3{
        width:250px;
        height: 150px;
        background-color: chartreuse;
        text-align: center;
        line-height: 150px;
        float:left;
    }
</style>
 <body>
    <div class="s">
    <div class="s1">1</div>
    <div class="s2">2</div>
    <div class="s3">3</div>
    </div>
</body>

②页面如下：
在这里插入图片描述

(4)归纳总结

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
准确地说，并不是清除浮动，而是清除浮动后造成的影响。

1.1、清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

1.2 、清除浮动的方法

首先看一下语法：

/*clear 清除*/
选择器{
clear:属性值;
}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响（最常用）

(1)方法一：额外标签法

它是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签
①代码段如下：

<style>
    .s4{
        clear:both;
    }
</style>
<body>
    <div class="s">
    <div class="s1">1</div>
    <div class="s2">2</div>
    <div class="s3">3</div>
    <div class="s4"></div>
    </div>
</body>

②页面如下;
在这里插入图片描述

总结：

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

(2)方法二：给父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。

①一个BFC的小知识

①什么是BCF（Block Formatting Context）及如何利用BFC？
官方解释： bfc是web页面中盒模型布局的css渲染模式。
通俗来讲：我们写css样式时，对一个元素设置css，我们首先要知道这个元素是块级元素还是行内元素，而bfc就是用来格式化块级盒子的。
Fromatting Context：指的是页面中一块渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
②BFC如何生成
满足下列css声明之一的元素便会生成BFC
1.float的值不为none
2.overflow的值不为visible
3.position的值不为static或relative
4.display的值为inline-block,table-cell,table-caption
5.flex box(元素的diaplay：flex或inline-flex)
③BFC的布局规则
简单归纳如下：
1.内部元素会在垂直方向一个接一个排列，可以理解为BFC中的一个常规流。
2.元素垂直方向上，同一个BFC的两个相邻盒子的margin会发生重叠
3.BFC区域不会与float元素区域重叠
4.计算BFC的高度，浮动子元素也会参与计算
5.BFC的子元素不会影响到外面的元素
然后接下来我们来说overflow：hidden原理
如下：当给父元素添加overflow：hidden后，父元素就就生成了一个BFC块，所以计算父元素高度的时候，根据上面的介绍，BFC的浮动子元素也会参与高度计算，BFC就把浮动的子元素高度当做自身高度去处理溢出，内部的元素不会影响外面的布局，所以外面看是清除了浮动。
①代码如下：

<style>
    .s{
        width:700px;
        background-color: antiquewhite;
        border: solid 3px red;
        overflow: hidden;
    }
 </style>
 <body>
    <div class="s">
    <div class="s1">1</div>
    <div class="s2">2</div>
    <div class="s3">3</div>
    </div>
</body>

②页面如下：
在这里插入图片描述 总结：

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

(3)方法三：使用after伪元素清除浮动

为了解决高度塌陷问题，我们采用方法一添加了一个空的div元素，并且设置了其css属性，虽然解决了问题，但是div是一个html元素，html只负责页面的框架，最好可以不显式添加div元素来解决问题，所以有了方法三的出现。
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
①代码如下：

<style>
    .s{
        width:700px;
        background-color: antiquewhite;
        border: solid 3px red;
    }
    .s1{
        width: 200px;
        height:100px;
        background-color: aqua;
        text-align: center;
        line-height: 100px;
        float:left;
    }
    .s2{
        width: 150px;
        height:200px;
        background-color:blueviolet;
        text-align: center;
        line-height: 200px;
        float:left;
    }
    .s3{
        width:250px;
        height: 150px;
        background-color: chartreuse;
        text-align: center;
        line-height: 150px;
        float:left;
    }
 .s::after{
        content: "";
        /* ::after默认添加的是一个行内元素，手动将其设置为块元素 */
        display: block;
        clear:both;
    }
</style>
<body>
    <div class="s">
    <div class="s1">1</div>
    <div class="s2">2</div>
    <div class="s3">3</div>
    </div>
</body>

②页面展示：
在这里插入图片描述

(4)方法四：clearfix类解决高度塌陷（推荐）

下面是更为通用的CSS代码解决高度塌陷问题，不仅可以解决高度塌陷的问题，也可以解决外边距重叠的问题。

实际情况复杂，不一定是要在元素的开始位置添加元素，也可能需要在元素的结束位置添加元素来解决问题，所以更为通用的代码，可以选择元素的开始位置和结束位置，对元素的开始位置和结束位置都添加空元素来解决问题
通过对元素的开始或结束位置添加元素，并且对元素属性设置为display: table;不仅可以解决高度塌陷的问题，也可以解决外边距重叠的问题，所以下面的代码更为通用，可以解决高度塌陷的问题和外边距重叠问题
下面的代码是一个类选择器与伪元素选择器，选中clearfix类的元素的开始和结束位置
在需要解决高度塌陷的问题或外边距重叠问题时，只需要在元素的类添加clearfix类即可

①代码段如下：

<style>
 .clearfix::after,.clearfix::after{
        content: "";
       /* display: table;用来解决 高度塌陷的问题、外边距重叠问题，在解决外边距重叠问题上，
       display: blob不行，只能使用table，所以使用display: table */
	display: table;	
    /* clear: both;解决高度塌陷的问题 */
	clear: both;
</style>
<body>
    <div class="s clearfix">
    <div class="s1">1</div>
    <div class="s2">2</div>
    <div class="s3">3</div>
    </div>
</body>

②页面展示：
在这里插入图片描述

1.3、一个常用布局框架实例

①代码如下：

<!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>
</head>
<style>
    body{
        margin: 0; 
        padding: 0;
    }
    .container{
        width: 1000px;
        /* height: 1500px; */
        /* border:solid 2px red; */
        margin: 30px auto 0px;
    }
    /* .col2{
        border:solid 2px rebeccapurple;
    } */
    .col2 .col2-1{
        width:700px;
        height:300px;
        background-color: red;
        float:left;

    }
    .col2 .col2-2{
        width:280px;
        height:300px;
        background-color: yellow;
        float:right;
    }
    /* 此处用了上述的方法一，运用额外标签法 */
    .clear{
        clear:both;
    }
    .col3{
        /* border:solid 2px rgb(188, 83, 156); */
        margin-top: 20px;
    }
    .col3 .col3-1{
        width:200px;
        height: 300px;
        background-color: aqua;
        float: left;
    }
    .col3 .col3-2{
        width: 400px;
        height: 300px;
        background-color: chartreuse;
        margin-left: 20px;
        float: left;
    }
    .col3 .col3-3{
        width: 360px;
        height: 300px;
        background-color: coral;
        float:right;
    }
    /* 此处用了上述的方法四，运用伪元素after */
    .clearfix::after{
        content: "";
        display: block;
        clear:both;
    }

    .coln{
    /* border: solid 2px rgb(188, 83, 156); */
    margin-top:20px;

    }
    ul{
        list-style: none;
        margin:0;
        padding:0;
    }
    /* .coln ul{
       background-color:antiquewhite;
    } */
    .coln ul li{
        /* border:solid 1px red;宽度超过1000px总宽度 */
        width: 190px;
        height: 200px;
        margin: 5px;
        float: left;
        background-color: rgb(173, 225, 227);

    }
   
</style>
<body>
    <div class="container">
        <div class="col2">
            <div class="col2-1"></div>
            <div class="col2-2"></div>
            <div class="clear"></div>
        </div>
       <div class="col3 clearfix">
           <div class="col3-1"></div>
           <div class="col3-2"></div>
           <div class="col3-3"></div>
       </div>
       <div class="coln">
           <ul class="clearfix">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
           </ul>
       </div>
    </div>
</body>
</html>

②页面展示：
在这里插入图片描述

꒰ঌsnail໒꒱

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【CSS解决页面高度塌陷问题】

高度塌陷问题描述1、页面高度塌陷问题(1)产生原因(2)正常标准流盒子(3)子盒子浮动(4)归纳总结1.1、清除浮动本质1.2 、清除浮动的方法(1)方法一：额外标签法(2)方法二：给父级添加overflow属性方法①一个BFC的小知识(3)方法三：使用after伪元素清除浮动(4)方法四：clearfix类解决高度塌陷（推荐）1.3、一个常用布局框架实例1、页面高度塌陷问题(1)产生原因我们都知道当元素浮动后，可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，
复制链接

扫一扫

专栏目录