高度塌陷

最新推荐文章于 2023-10-12 23:01:42 发布

薛夙虞

最新推荐文章于 2023-10-12 23:01:42 发布

阅读量86

点赞数

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

本文链接：https://blog.csdn.net/qq_39291725/article/details/110387173

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

高度塌陷

文章目录

高度塌陷
一、原因
二、解决方法
三、总结

一、原因

高度塌陷：块元素的高度默认情况下是被子元素撑开的，
如果子元素浮动，将会完全脱离文档流，脱离文档流子元素无法撑起父元素高度，
将会导致父元素高度丢失，父元素一旦丢失页面的其他元素位置也会移动，导致布局的混乱

二、解决方法

1、BFC

BFC（Block Format Context）

块级格式化环境
BFC是元素的一个隐藏的属性，一旦元素开了BFC它将会开启一个独立的布局的区域
这个布局区域将会具有一些特殊的性质：

开启了BFC的元素子元素的垂直外边距不会传递给父元素
开启了BFC的元素不会被浮动的元素所覆盖
开启了BFC的元素可以包含浮动的子元素

BFC无法直接开启，需要通过一些属性来开启BFC

设置元素浮动可以开启BFC
将元素设置为行内块元素
可以将元素的overflow设置为一个非visible的值

我们可以通过overflow:hidden来开启元素的bfc，从而解决高度塌陷的went

1.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        .box1{
/*            height: 200px;*/
            border: 10px red solid;
/*            float: left;*/
/*            display: inline-block;*/
            overflow: hidden;
        }
        
        .box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
/*            设置元素浮动*/
            float: left;
            
        }
        
        .box3{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
   
   <div class="box1">
       <div class="box2"></div>
   </div>
   
   <div class="box3"></div>
    
</body>
</html>

2.clear

实际上是浏览器自动在上部增加了一个【外边距=浮动元素的高度】
clear 用来清除浮动元素对当前元素的影响
可选值：

none 默认值不清除
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中对当前元素影响最大的那一侧

2.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 400px;
            background-color: #bfa;
            float: left;
        }
    
        .box2{
            width: 300px;
            height: 300px;
            background-color: #ff0;
            float: right;
        }
    
        .box3{
            width: 300px;
            height: 300px;
            background-color: orange;
            clear: both;
        }
    
    </style>
</head>
<body>
   
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
    
</body>
</html>

三、总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        .box1{
            border: 10px red solid;
        }
        
        .box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;

            
        }
        
        .box3{
            clear: both;
        }
        
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
       
    </style>
</head>
<body>
   
   <div class="box1 clearfix">
       <div class="box2"></div>
   </div>
   
    
</body>
</html>

薛夙虞

关注

0
点赞
踩
0

收藏

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

高度塌陷文章目录高度塌陷一、原因二、解决方法1、BFC1.1 示例代码2.clear2.1 示例代码三、总结一、原因高度塌陷：块元素的高度默认情况下是被子元素撑开的，如果子元素浮动，将会完全脱离文档流，脱离文档流子元素无法撑起父元素高度，将会导致父元素高度丢失，父元素一旦丢失页面的其他元素位置也会移动，导致布局的混乱二、解决方法1、BFCBFC（Block Format Context）块级格式化环境BFC是元素的一个隐藏的属性，一旦元素开了BFC它将会开启一个独立的布局的
复制链接

扫一扫