前端：解决高度塌陷

最新推荐文章于 2023-01-04 14:28:44 发布

以南_ttrg

最新推荐文章于 2023-01-04 14:28:44 发布

阅读量318

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41965731/article/details/106535274

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

高度塌陷问题：

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素有多高，父元素就有多高。但是子元素设置浮动以后，子元素会脱离文档流，此时会导致子元素的无法撑起父元素的高度，导致父元素高度塌陷。父元素的高度塌陷，则父元素下面的元素都会往上移动，导致页面布局混乱。

解决方法一(额外标签法)：

根据W3C标准在页面中元素都会有一个隐含的属性叫做 Block Formatting Context 简称BFC，该属性可以设置开启或者关闭，默认是关闭的。

开启元素的BFC，元素会有以下特征：

父元素的垂直外边距不会与子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素

那么，如何开启元素的BFC呢？

1、设置元素浮动

----使用此方法，虽然会撑开父元素，但是会导致父元素宽度丢失，而且这种方式会导致下边的元素上移，不能解决问题

2、设置元素的绝对定位

3、设置元素为 inline-block

----可以解决问题，但是会导致宽度丢失

4、（推荐方式）将元素的overflow设置为一个非visible的值（将overflow的值设置为hidden是副作用最小的开启BFC）

overflow : hidden;

但是，在IE6及其以下没有BFC，但是有一个隐含的属于Layout，可以直接将zoom的值设置为1

zoom: 1; (zoom 表示放大的意思，后面的数值表示放大几倍）

overflow:hidden;
zoom:1;

解决方法二（额外标签法）：

可以直接在高度塌陷的父元素的最好添加一个空白的div，由于这个div没有浮动，他说可以撑起来父元素的高度
然后对其进行清除浮动。这样通过这个空白的div撑起父元素的高度，基本没有副作用

缺点：
使用这种方式虽然解决了塌陷问题，但是给页面中添加了多余的结构，但是也是可以进行使用的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
 <style>
      .t1{
         border: 1px solid red;
      }
      .t2{
          width: 200px;
          height: 200px;
          background-color: yellow;
          float: left;
      }

      /*
        解决塌陷方案二：
        可以直接在高度塌陷的父元素的最好添加一个空白的div，由于这个div没有浮动，他说可以撑起来父元素的高度
        然后对其进行清除浮动。这样通过这个空白的div撑起父元素的高度
        基本没有副作用

        缺点：
        使用这种方式虽然解决了塌陷问题，但是给页面中添加了多余的结构，但是也是可以进行使用的；

      */
     .clear{
         clear: both;
     }

 </style>
<body>

   <div class="t1">
       <div class="t2"></div>
       <div class="clear"></div>
   </div>

</body>
</html>

解决方法三:（父级after伪类）

对于方法二的优化

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
 <style>
      .t1{
         border: 1px solid red;
      }
      .t2{
          width: 200px;
          height: 200px;
          background-color: yellow;
          float: left;
      }
     /*
        解决方法三：通过after伪类给元素最后面加一个空白的元素，然后对其清除浮动.
     */

     .clearfix:after{
         /*添加一个内容*/
         content: '';
         /*转换为一个块元素*/
         display:block;
         height:0;
         /*清除俩侧的浮动*/
         clear:both;

         visibility:hidden;
     }
     /*在IE6中不支持after伪类 所以还是得需要Layout*/
     .clearfix{
         zoom: 1;
     }

 </style>
<body>

   <div class="t1 clearfix">
       <div class="t2"></div>
   </div>

</body>
</html>

解决方法四:（父级双伪类）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .t1{
        border: 1px solid red;
    }
    .t2{
        width: 200px;
        height: 200px;
        background-color: yellow;
        float: left;
    }
    /*
       解决方法三：通过after伪类给元素最后面加一个空白的元素，然后对其清除浮动.
    */

    .clearfix:after,.clearfix:before{
        /*添加一个内容*/
        content: '';
        /*转换为块级元素，并且显示在一行*/
        display:table; 
    }

    .clearfix:after{
        clear: both;
    }

    /*在IE6中不支持after伪类 所以还是得需要Layout*/
    .clearfix{
        zoom: 1;
    }

</style>
<body>

<div class="t1 clearfix">
    <div class="t2"></div>
</div>

</body>
</html>

以南_ttrg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：解决高度塌陷

高度塌陷问题：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素有多高，父元素就有多高。但是子元素设置浮动以后，子元素会脱离文档流，此时会导致子元素的无法撑起父元素的高度，导致父元素高度塌陷。父元素的高度塌陷，则父元素下面的元素都会往上移动，导致页面布局混乱。解决方法一：根据W3C标准在页面中元素都会有一个隐含的属性叫做 Block Formatting Context 简称BFC，该属性可以设置开启或者关闭，默认是关闭的。开启元素的BFC，元素会有以下特征：父元素的垂直.
复制链接

扫一扫