不太理解清除浮动怎么会让父元素包住浮动元素的

来源：2-14 编程练习

qq_慕用6596887

2020-08-15 17:56:34

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .per{
            width: 300px;
            height: auto;
            border:2px solid #aaa;
        }
        .li{
            width: 100px;
            height: 100px;
            background: red;
            margin: 5px;
            float: left;
        }
        /*此处写代码*/
        /*.clear:after{
            content:".";
            display:block;
            height:0px;
            clear:both;
            visibility:hidden;
        }
        .clear{
            *zoom:1;
        }*/
        .clearfix{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="per clear">
        <div class="li"></div>
        <div class="li"></div>
        <!-- 此处写代码 -->
        <div class="clearfix"></div>
    </div>
</body>
</html>

已知：元素设置浮动后会脱离文档流，所以为脱离div。clear属性是指定哪一方向上不允许存在浮动元素。

那么在父元素中添加一个空元素并设置clear:both，父元素的方框照理说应该还是塌陷的啊？子元素的float属性又没有去除。空元素的clear：both是不允许这个空元素周围存在浮动元素罢了

写回答

3回答

好帮手慕久久

2020-08-15

同学你好，问题解答如下：

准确的说，给空div设置clear:both，是为了清除浮动的影响（并不是清除子元素的浮动效果），即清除浮动给父元素带来的高度塌陷问题。

“.clear”这个样式，告诉浏览器，我的左边和右边都不允许有浮动元素的存在。由于此时第一个div和第二个div位置已经确定好了，浏览器在计算“.clear”这个div的位置时，为了满足它的要求，就会让其在浮动元素下面独占一行显示，这个过程，就会将父元素的高度撑开，从而解决的高度塌陷的问题。

对于以上，同学了解一下即可，会用就行了。

祝学习愉快！

hq_慕用6596887

h ".clear”这个样式，告诉浏览器，我的左边和右边都不允许有浮动元素的存在。由于此时第一个div和第二个div位置已经确定好了，浏览器在计算“.clear”这个div的位置时，为了满足它的要求，就会让其在浮动元素下面独占一行显示，这个过程，就会将父元素的高度撑开上述意思是空div元素在浮动元素下独占一行显示，但他在父div方框里，撑开父元素高度时会将浮动元素的高度计算进去吗？

h020-08-15

共1条回复