高度塌陷问题

最新推荐文章于 2023-12-19 18:02:15 发布

qq_47651772

最新推荐文章于 2023-12-19 18:02:15 发布

阅读量53

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_47651772/article/details/128061422

版权

一般情况下，我们不会给父元素设置指定的高度，都是让他被内容撑开的，如果我们给子元素设置浮动，子元素会脱离文档流，一旦元素脱离文档流了，子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致，页面布局混乱，这就叫高度塌陷。

解决高度塌陷方法一：

1、给父元素设置固定高度,但这种方式不推荐使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 面试题：请你简单说一说高度塌陷，以及如何解决 -->
    <style type="text/css">
    /* 一般情况下，我们不会给父元素设置指定的高度
    都是让他被内容撑开的
    如果我们给子元素设置浮动，子元素会脱离文档流，一旦元素脱离文档流了
    子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致
    我页面布局混乱，这就叫高度塌陷
    如何解决：
        1、给父元素设置固定高度,但这种方式不推荐使用
    
    */
      .outer {
        border: 10px red solid;
        height: 100px;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>
  </body>
</html>

解决高度塌陷方法二：

给元素开启隐含属性BFC（块级格式化上下文），一旦元素开启隐含属性BFC后，元素就具有一些独有的特点，这些特点可以解决一些问题，其中就包括高度塌陷。

1、开启BFC后，元素具有哪些特点？

（1）、父子外边距就不会重叠了（解决父子外边距重叠的问题）

（2）、开启BFC的元素就不会被浮动元素所覆盖

（3）、开启BFC的元素可以包裹住浮动的元素（解决高度塌陷问题）

2、如何开启BFC属性

（1）、设置overflow样式，样式值只要是非visible

也就是说可以设置hideen，auto，scroll等，其中hideen是副作用最小（推荐使用）

（2）、设置元素浮动(不推荐)

确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，

页面布局依然会混乱，而且父元素的宽度也会丢失。

（3）、将元素转成行内块元素(不推荐)

可以解决父元素高度丢失的问题，但也带来一些新问题，父元素的宽度丢失了，

而且三像素也出现。

（4）、将元素设置绝对定位 position: absolute;(不推荐)

确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，页面布局依然会混乱，而且父元素的宽度也会丢失。

通过clear样式，消除浮动元素对下面元素的影响

可选值：

left 消除左侧浮动对元素的影响

right 消除右侧浮动对元素的影响

both 消除两侧侧浮动对元素的影响，其中哪一侧浮动带来的影响大，就清除谁解决高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 面试题：什么是BFC，如何开启BFC -->
    <!-- 解决高度塌陷方法二：
    给元素开启隐含属性BFC（块级格式化上下文），一旦元素开启隐含属性BFC后
    元素就具有一些独有的特点，这些特点可以解决一些问题，其中就包括高度塌陷
    1、开启BFC后，元素具有哪些特点？
      （1）、父子外边距就不会重叠了（解决父子外边距重叠的问题）
      （2）、开启BFC的元素就不会被浮动元素所覆盖
      （3）、开启BFC的元素可以包裹住浮动的元素（解决高度塌陷问题） 
      
    2、如何开启BFC属性
      （1）、设置overflow样式，样式值只要是非visible
        也就是说可以设置hideen，auto，scroll等
        其中hideen是副作用最小（推荐使用）
      （2）、设置元素浮动(不推荐)
      确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，
      页面布局依然会混乱，而且父元素的宽度也会丢失
      （3）、将元素转成行内块元素(不推荐)
      可以解决父元素高度丢失的问题，但也带来一些新问题，父元素的宽度丢失了，
      而且三像素也出现
      （4）、将元素设置绝对定位 position: absolute;(不推荐)
      确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，
      页面布局依然会混乱，而且父元素的宽度也会丢失
    -->
    <style type="text/css">
      .outer {
        border: 10px red solid;
        /* height: 100px; */
        /* 开启BFC */
        /* overflow: scroll; */
        /* float: left; */
        /* display: inline-block; */
        position: absolute;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>
  </body>
</html>

解决塌陷问题方法三：

在浮动子元素的下方设置一个空的块元素，然后借助clear属性来消除浮动元素对空的块元素的浮动影响。

缺点：在结构里面多了一个空的块元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 解决高度塌陷问题方法三：
    在浮动子元素的下方设置一个空的块元素，
        然后借助clear属性来消除浮动元素对空的块元素的浮动影响
     缺点：在结构里面多了一个空的块元素
    
    -->
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box3{
        height: 100px;
        background-color: yellow;
      }
      .box4{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">box2</div>
      <!-- 空的块元素 -->
      <div class="box4"></div>
    </div>
    <div class="box3"></div>
  </body>
</html>

<!--
			  解决高度塌陷方案三：
			  	可以直接在高度塌陷的父元素的最后，添加一个空白的div，
			  	由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
			  	然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
			  	基本没有副作用
			  
			    使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
-->

解决高度塌陷问题方法四：

结合伪类after以及clear来解决，通过伪类after，在元素的后面添加内容，将这个内容转成块元素，再清楚其他浮动元素对这个块元素的浮动影响，一般情况下，我们会给这个写法单独设置一个类名，哪里需要解决高度塌陷问题，就给对应的位置添加类名，这种方式也是最常用的解决高度塌陷问题的方法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 解决高度塌陷问题的方法四：
    结合伪类after以及clear来解决
    通过伪类after，在元素的后面添加内容，将这个内容转成块元素，
    再清楚其他浮动元素对这个块元素的浮动影响
    一般情况下，我们会给这个写法单独设置一个类名，哪里需要解决高度塌陷问题
    ，就给对应的位置添加类名
    这种方式也是最常用的解决高度塌陷问题的方法
    -->
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }
      .clearfix::after{
        /* 添加的元素不会独占一行 */
        content: '';
        /* 将添加的元素转成块元素 */
        display: block;
        /* 清除浮动元素对空的块元素的影响 */
        clear: both;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="box2"></div>
    </div>
    <p class="p1 clearfix">
      <div class="p2"></div>
    </p>
  </body>
</html>

<!-- 
	  /*通过after伪类，选中box1的后边*/
/*	
	可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
	这样做和添加一个div的原理一样，可以达到一个相同的效果，
	而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
*/

      /*  解决高度塌陷方案三： */
      .box1:after {
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
      }
 -->

qq_47651772

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高度塌陷问题

一般情况下，我们不会给父元素设置指定的高度，都是让他被内容撑开的，如果我们给子元素设置浮动，子元素会脱离文档流，一旦元素脱离文档流了，子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致，页面布局混乱，这就叫高度塌陷。
复制链接

扫一扫