2-10重大疑问

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

为什么添加了clear或overflow后，父元素per就可以撑开了，看了老师对其他同学的一些解释，还是糊里糊涂的，另外关于clear属性，我是否可以这样理解：当给某一个元素添加了clear后，那么这个元素就不受浮动的影响，会跑到浮动的正下方去，

慕丝6937110 2018-03-10

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

收起

4回答

破晓小哥哥回答被采纳获得+3积分 2018-04-29 11:40:19

overflow:hidden 有溢出隐藏（盒子一定要是块级盒子，并且有宽度）和清除浮动两个作用。

没有给父级加高度情况下，会发生高度塌陷，设置overflow:hidden 后可以看到父级随着子级的内容的多少而改变高度，对布局不造成任何影响！

如果你在ie比较低版本的浏览器中使用overflow：hidden；也不能达到这样的效果，那么就加上 zoom:1;

所以为了让兼容性更好的话，如果使用overflow:hidden;来清除浮动，解决父级塌陷这个问题的话，建议配合 zoom:1;来使用，即：overflow:hidden;zoom:1;

收起回答

慕丝6937110 提问者 #1

还有一个问题：overflow:hidden按理说他的作用只是把超出父元素宽度/高度区域的子元素部分给隐藏掉，zoom：1；的作用是通过子元素的总体高度来放大或缩小父元素的高度，那么为什么我在per这个父元素中只写了overflow:hidden就达到了解决父元素塌陷的问题，不写zoom：1也没关系？？？

2018-05-29 00:27:48
妮可妮可妮_ 回复提问者慕丝6937110 #2

如果要所有浏览器表现一致，zoom:1;和overflow:hidden要同时使用

2018-05-29 11:41:28

破晓小哥哥 2018-04-29 11:42:21

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。你想让谁移动，你就给谁设置clear属性，因为clear只能影响调用它的元素

收起回答

怎么都被占用了呢 2018-03-11 14:59:12

给元素添加clear:both是为了清除其他元素浮动对它造成的影响。然后在正常文档流中原本位置显示。正常文档流中有了子元素，父元素要包裹子元素，从而就解决了父元素高度塌陷的问题。给父元素添加overflow:hidden，也是为了解决子元素浮动，对父元素造成的高度塌陷问题，作用是为了重新计算盒子大小。

收起回答