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

<!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是不允许这个空元素周围存在浮动元素罢了

qq_慕用6596887 2020-08-15

源自：float浮动 2-14 编程练习

收起

3回答

6hEd 2020-08-19 07:12:31

新手像我刚开始就不理解,这样说吧,

浮动其实会把父元素的高度扣掉,你想想一开始父元素高度是auto(),减一个减100,三个300,

尼马高度就没了.....没了咋辨?

给他一个固定高度不就完事了!

意思就是儿子你今天在房间,不准出去玩!

打好多字.不采纳我.你找不到工作的 :) 哈哈哈

收起回答

好帮手慕久久 2020-08-15 19:13:01

同学你好，理解的是对的。

祝学习愉快!

收起回答

好帮手慕久久 2020-08-15 18:41:06

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

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

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

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

祝学习愉快！

收起回答

提问者 qq_慕用6596887 #1

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

2020-08-15 19:01:00