杂谈：我对清浮动clear的理解

首先，我们写一个简单的网页，相关代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1, .box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>
View Code

显然，它的最终展示效果是这样的：

 使用开发者工具，会发现container这个类的高度为0

 这就可以解释为什么红色块会浮上去：此时，box1(黄色块)与box2(蓝色块)为同一水平，box3(红色块)与container为同一水平。而黄色块与蓝色块比红色块和container的水平更高（这里的高度是第三维的高度，可以理解为纸面上的黄色块与蓝色块被抬起来了），既然container的高度为0， 所以红色块就被他们两个挡住了。

现在的问题是，如何使得红色块不被遮住？kerwin老师提供了以下四种方法：

1. 将container的高度写为固定值，这样可以把红色块挤出被黄色和蓝色覆盖的位置。

　　缺点: 如果增加了子元素内容，需要更改固定值，比较麻烦。

2. 在box3中使用clear清除浮动。即在box3的样式里添加属性clear

        .box3{
            width: 300px;
            height: 300px;
            background-color: red;
            clear: both;
        }

　　缺点：增加了

3. 既然浮动导致的高度“坍塌”是由前面的元素引起的，就应该由前面的元素来解决这个问题。所以在container中另外添加一个不带宽和高的div块，在这个div块中添加样式：使用clear属性值清除浮动。即：

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div style="clear: both;"></div>
    </div>

　　缺点：增加了空标签，影响代码可读性

4.在container这个母元素中添加样式 overflow:hidden;

        .container{
            /* height: 200px; */
            overflow: hidden;
            /* bfs, 让浮动元素计算高度 */
        }

第一种方法很好理解。可是clear是如何“清除浮动”的？在第三种方法中，为什么要在container中额外添加一个div块来清除浮动，不能直接在box2中使用clear属性吗？于是我尝试了这种方法，结果却是这样的：

    <div class="container">
        <div class="box1"></div>
        <div class="box2" style="clear: both;"></div>
        <!-- <div style="clear: both;"></div> -->
    </div>

思来想去，我认为有可能是这样的：

clear可以使前面水平高度在自己之上的元素降到自己的水平高度，以解决清除浮动的效果。例如方法二，在box3红色块中使用clear，那么它前面的元素box1黄色块和box2蓝色块水平高度都在它之上，就会被降至跟它同一水平。

而在方法三中，我们在container里面又加了一个div，这个div在box1黄色块和box2蓝色块后面，在这个div里面使用clear，也能使前面水平高度比它高的元素降至跟它同一水平。

而为什么我刚刚尝试的方法达不到想要的效果？我认为它的过程可能是这样的：

首先，黄色块向左浮起，蓝色块也浮起，并且蓝色块使用了clear，这说明蓝色块清除了前面黄色块的浮起（这个效果是，蓝色块不会浮动到黄色块的右边，而是从黄色块后另起一行，向左浮起），并且蓝色块让黄色块降至和自己同样的水平高度，注意，蓝色块此时本身就是和黄色块同一个水平高度，所以这里的降水平高度并没有起作用，黄色块和蓝色块依然比container和红色块更高。因此，由于container的高度为0，红色块就移上去被黄蓝挡住了。

 

posted @ 2023-11-19 18:03  孤兒教母  阅读(26)  评论(0)    收藏  举报