HTML 学习记录（八）_html听课记录-CSDN博客

本文链接：https://blog.csdn.net/little_w98biubiu/article/details/124740609

本文解析了网页布局中浮动元素带来的高度塌陷问题，介绍了BFC的概念及其三种开启方式，包括解决方法：clear属性、空元素撑开和伪元素技巧。同时涵盖了垂直外边距折叠的解决方案，如clearfix类的使用。

摘要由CSDN通过智能技术生成

网页的布局：将网页分成一块一块的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 相同样式提取，减少代码量 */
        header,main,footer{
            width: 1000px;
            margin: 0 auto;
        }
        header{
            height: 150px;
            background-color: silver;
        }
        main{
            height: 400px;
            background-color: rgb(137, 185, 171);
            margin: 10px auto;
        }
        main nav,article,aside{
            float: left; 
            height: 400px;  
        }
        main nav{
            width: 200px;
            background-color: brown;

        }
        main article{
            width: 580px;
            background-color: rgb(221, 221, 60);
            margin: 0 10px;
        }
        main aside{
            width: 200px;
            background-color: pink;
        }
        footer{
            height: 150px;
            background-color: rgb(206, 126, 126);
        }
    </style>
</head>
<body>

    <header></header>

    <main>
        <!-- 左侧导航 -->
        <nav></nav>
        <!-- 中间文章 -->
        <article></article>
        <!-- 右侧边栏 -->
        <aside></aside>
    </main>

    <footer></footer>
</body>
</html>

float的缺陷：

高度塌陷：当一个块内的内容大小不确定时，如果我们设置了固定的高度，可能会因为内容过少而导致排布不满，或者因为内容过多导致溢出。所以说一般来讲父元素的高度不是写死的而是希望能够根据其内部的内容动态的变化（自动撑开）。但是如果我们设置了子元素浮动，其会完全脱离文档流，父元素的高度无法被撑起，导致父元素高度丢失，同时还会导致其下的元素位置也发生变化，页面布局混乱。

解决1：开启BFC(Block Formatting Context) 块级格式化环境

CSS一个隐含的属性，为一个元素开启BFC之后该元素会变成一个独立的布局区域。

开启后的特点：

1.该元素不会被浮动元素所覆盖

2.该元素的子元素和父元素的外边距不会重叠

3.该元素可以包裹住浮动的子元素

开启方式(都会有副作用)：

1.设置元素浮动(宽度丢失，下面的元素也会上移)

2.设置元素为行内块元素(跨度丢失，行内块不适合作为外部布局容器)

3.设置元素的overflow为一个非visible的值(hidden) (副作用小)

overflow:hidden也会取消子元素的外边距与父元素重叠效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer{
            border: 10px solid red;
            /* 相当于开启了outer的BFC 方法一 */
            /* float: left; */
            /* 相当于开启了outer的BFC 方法二 */
            /* display: inline-block; */
            /* 相当于开启了outer的BFC 方法三 */
            overflow: hidden;
        }
        .inner{
            height: 100px;
            width: 100px;
            background-color: green;
       
         float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

解决2：设置clear属性

由于box1的浮动导致box3的位置上移，3受到1的浮动影响位置发生了改变。如果不希望某个元素因为其他元素的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素产生的影响。

原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不瘦其他元素的影响。

可选值 left 清除左侧浮动元素对当前元素产生的影响

right 清除右侧浮动元素对当前元素产生的影响

both 清除两侧中最大影响的那侧(设置最大的上外边距)

<!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>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            font-size: 50px;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: blueviolet;
            font-size: 50px;
            float: right;
        .box3{
            width: 300px;
            height: 300px;
            background-color: orange;
            font-size: 50px;
            clear: left;
            clear: right;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

解决3：添加空的子元素来撑起父元素

如果一个父元素内不止一个子元素，当其中一个子元素浮动时，父元素仍然可以被其他的子元素给撑开（仍然可以包裹住余下的子元素）。

原理：用结构办法处理表现问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        .box3{
            /* 清除2的移动对3的影响后，3仍在远处，加了上边距 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

解决4：添加伪元素

与方法3的原理一致，但是改变添加子元素为设置after伪类并转换为块元素。添加的方式由HTML添加变为通过伪元素添加。

作用原理仍是在浮动元素后添加内容，并用clear属性去除浮动影响，从而实现内容撑开父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            border: 10px red solid;
        }
        .box1::after{
            content: '';
            display: block;
            clear: both;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

垂直方向相邻外边距折叠问题

两个要素：垂直相邻

解决办法1：将两个相邻的元素隔开使用:before伪元素（会导致溢出问题）

解决上述溢出问题:content内容置空同时设置dispaly:table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .box1::before{
            content: "";
            display: table;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(223, 130, 9);
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

解决办法2：clearfix类！！！ （既可以解决高度塌陷又可以解决外边距重叠）

相当于写了一个样式，如果某个元素出现了这写问题，就给这个元素添加这个clearfix类的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(223, 130, 9);
            margin-top: 100px;
        }
        /* clearfix类
            设置table既可以解决高度塌陷又可以解决外边距重叠 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>