【前端-CSS】关于浮动、高度塌陷、BFC

最新推荐文章于 2024-09-16 02:05:33 发布

CactusStory_

最新推荐文章于 2024-09-16 02:05:33 发布

阅读量210

点赞数

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

本文链接：https://blog.csdn.net/CactusStory_/article/details/104786113

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于浮动的一些特点

浮动元素会完全脱离文档流，不再占用文档流的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于浮动</title>

    <style>
        .boxOne{
            width: 300px;
            height: 200px;
            background-color: lightcoral;
            border: 10px rgb(207, 120, 128) inset;
            float: left;
        }

        .boxTwo{
            width: 400px;
            height: 300px;
            background-color: lightpink;
            border: 10px pink inset;
        }
    </style>
</head>
<body>
    <div class="boxOne"></div>
    <div class="boxTwo"></div>
</body>
</html>

在这里插入图片描述

浮动元素不会超过它上边的兄弟元素，垂直方向上，最多与前面的浮动元素同等高度

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于浮动</title>

    <style>
        .boxOne{
            width: 300px;
            height: 200px;
            background-color: lightcoral;
            border: 10px rgb(207, 120, 128) inset;
            float: left;
        }

        .boxTwo{
            width: 300px;
            height: 200px;
            background-color: lightpink;
            border: 10px pink inset;
            float: left;
        }

        .boxThree{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            border: 10px inset lightskyblue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="boxOne"></div>
    <div class="boxTwo"></div>
    <div class="boxThree"></div>
</body>
</html>

效果图
在这里插入图片描述

浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。
元素设置浮动之后，脱离文档流后，有些特点随之改变
（1）块元素：不再独占一行，默认情况下，高度宽度会被内容撑开；
（2）行内元素：脱离文档流后，特点与块元素一样；
（3）即，元素脱离文档流后不再区分块元素和行内元素。

高度塌陷问题

浮动布局中，父元素的高度默认是被子元素内容撑开的，当子元素设置浮动之后会脱离文档流，也就无法撑起父元素的高度，导致父元素高度丢失
父元素高度丢失之后，其下方的元素会自动上移，导致页面布局混乱
高度塌陷现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于高度塌陷</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .outer{
            border: 10px inset paleturquoise;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: powderblue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

在这里插入图片描述

使用after伪类解决高度塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>解决高度塌陷</title>
     <style>
        .outer{
            border: 10px inset paleturquoise;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: powderblue;
            float: left;
        }

         .outer::after{
             display: block;
            content: "";
            clear: both;
         }
     </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
      
    </div>
    
</body>
</html>

在这里插入图片描述

BFC（block formatting context）块级格式化环境

BFC(block formatting context)块级格式化环境：是CSS中一个隐含属性。当一个元素开启BFC之后，会变成一个独立的布局区域
如何开启BFC：
（1）设置元素的浮动（不推荐，副作用较大）
该情况下，该元素脱离文档流，宽度丢失
在上例高度塌陷的基础上，修改outer的样式

	  .outer{
            margin: 30px;
            border: 10px inset paleturquoise;
           float: left;  /* 开启BFC */
        }

在这里插入图片描述
（2）将元素设置为行内块元素（不推荐）

 .outer{
            margin: 30px;
            border: 10px inset paleturquoise;
            display: inline-block;
        }

在这里插入图片描述（3）将元素的overflow设置为一个非visible值（经常使用hidden、auto也可以）

 .outer{
            margin: 30px;
            border: 10px inset paleturquoise;
            overflow: auto;
        }

在这里插入图片描述

开启BFC之后的元素特点
（1）开启BFC的元素不会被浮动元素覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .outer{
            width: 200px;
            height: 200px;
            background-color: powderblue;
            float: left;
        }

        .new{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            overflow: hidden;  /*开启BFC*/
    }
    </style>
</head>
<body>
    <div class="outer"> </div>
    <div class="new"></div> 
</body>
</html>

未开启BFC：
在这里插入图片描述 开启BFC后：

（2）开启BFC的元素与其父元素的外边距不会重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC</title>
    <style>
        .outer{
            width: 200px;
            height: 200px;
            background-color: powderblue;
            overflow: hidden;/*开启BFC*/
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

未开启BFC：
在这里插入图片描述
开启BFC后：