清除浮动的方法

旺仔小拳头I

已于 2022-04-07 15:17:11 修改

阅读量219

点赞数

分类专栏：前端学习文章标签：前端 javascript

于 2022-04-07 15:14:53 首次发布

本文链接：https://blog.csdn.net/YeChan414/article/details/124017025

版权

前端学习专栏收录该内容

26 篇文章 1 订阅

订阅专栏

为什么要清除浮动

首先，我们来看一个例子，为什么要清除浮动

<!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>
        .con{
            width:250px;
            background-color: black;
        }
        .l{
            width: 100px;
            height:100px;
            background-color: aqua;
        }
        .r{
            width: 100px;
            height:100px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="l"></div>
        <div  class="r"></div>
    </div>
</body>
</html>

我们设置了一个父盒子con，但是并没有给它高度，然后再设置了两个子盒子，高度均为100px，这时，我们发现，父盒子的高度会被撑开，如图

接着，我们想让蓝色盒子和绿色盒子排成一排，所以我们给它们两个均加入了float:left;但是我们发现，这两个盒子浮动以后，外面那个盒子变得没有高度了，如图

所以这个时候，我们就要来清除浮动，让解决高度塌陷的问题

那么怎么清除浮动呢？

清除浮动的方法

父元素尾部加入一个块元素

我们给父元素的最后，加入一个类为last的div

<div class="con">
        <div class="l"></div>
        <div  class="r"></div>
        <div class="last"></div>
    </div>

然后，对这个last盒子清除浮动

        .last{
            clear:both;
        }

这样，我们的效果就达成了

创建BFC

BFC，就是块级格式化上下文，BFC是一个独立的渲染区域。简单来说就是，BFC里面元素无论怎么布局，都不会影响到BFC外面，反之也是。

我们通过给con这个父盒子设置overflow:hidden;来将其变为BFC

.con{
            width:250px;
            overflow:hidden;
            background-color: black;
        }

BFC的创建方式还有很多，例如float属性不为none、position不为static和relative、overflow不为visible、display为inline-block, table-cell, table-caption, flex, inline-flex，通过这些方式都可以创建BFC；而BFC的作用也很多，除了上述说到的可以清除浮动解决高度塌陷问题外，它还可以防止外边距重叠，防止文字环绕

通过伪元素清除浮动

我们可以通过给父元素加入伪元素，将伪元素设置为块元素，然后clear:both;

.con::after{
            content:'';
            display: block;
            clear: both;
        }

欢迎指正

旺仔小拳头I

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的方法

为什么要清除浮动首先，我们来看一个例子，为什么要清除浮动<!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-sc
复制链接

扫一扫