1.8Web前端基础笔记

至暗

已于 2022-03-19 14:43:00 修改

阅读量44

点赞数

分类专栏： 1.web前端——html、css基础文章标签：前端 css html web

于 2022-03-17 12:43:50 首次发布

本文链接：https://blog.csdn.net/m0_64838786/article/details/123545504

版权

1.web前端——html、css基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

一、高度塌陷和BFC
- 1.高度塌陷
- 2.BFC
二、clear
三、after伪类
三、clearfix

一、高度塌陷和BFC

1.高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的

当子元素浮动后会脱离文档流，就无法撑起父元素的高度，导致父元素的高度缺失

父元素高度缺失后，会是下面的元素上移，导致页面的布局混乱

2.BFC

BFC（块级格式化环境）

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

开启BFC后的特点

开启BFC的元素不会被浮动元素所覆盖

开启BFC的子元素和父元素外边距不会重叠

开启BFC的元素可以包含浮动的子元素

开启BFC的方式

设置元素的浮动（不好）

将元素设置为行内块元素（不好）

将元素的overflow设置为一个非visible的值——overflow: hidden

二、clear

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{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: bisque;
            float: left;
        }
        .box3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

结果：
clear: both;

三、after伪类

<!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{
            border: 10px red solid;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: bisque;
            float: left;
        }
        .box1::after{
            content: '';
            clear: both;
            /* 因为after是行内元素,所以没有解决坍塌问题 */
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

结果：同上

三、clearfix

<!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: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:bisque;
            margin-top: 200px;
        }
        /* clearfix既可以解决高度塌陷问题，也可以解决外边距重叠问题 
            .clearfix::before解决的是外边距重合问题
            .clearfix::after解决的是高度塌陷问题*/
        .clearfix::before,.clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>