为什么要清除浮动？如何清除浮动。

最新推荐文章于 2024-08-12 22:06:26 发布

炎炽枫

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量88

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_39991986/article/details/118527280

版权

浮动布局，脱离了标准文档流，漂浮在其上方。就想飞机在天上飞，大地是标准流。

浮动布局的影响：父级元素若没有高度，设置auto,那父级元素则没有了高度，只能由父级元素下的其他子元素撑开，除非你给父级元素定义高度，但实际效果是你想取浮动元素的高度。

上代码：

<!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>
        .box{
            width: auto;
            background-color: #ccc;
        }
        .child{ 
            width: 50px;
            height: 50px;
        }
        .color1{
            float: right;
            background-color:aqua;
        }
        .color2{
            float:left;
            background-color:rebeccapurple;
        }
        .color3{
            float:right;
            background-color:brown;
        }
        /* .box::after{
            content: '';
            display: table;
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="box">
        <div class="child color1"></div>
        <div class="child color2"></div>
        <div class="child color3"></div>
        <div>兄弟元素有浮动元素，此元素没有浮动，撑开了父级元素，父级元素获取到此高度</div>
    </div>
    <div>含有浮动元素的box后面的元素</div>
</body>
</html>

暂未清除浮动的效果：

由此，可以看出浮动对父级元素的兄弟元素造成了影响，实际是我们想要浮动元素的高度成为父级元素的高度。

注释放开，得到以下效果：

清除浮动后，父级元素box可以获取到浮动元素的高度，而不是等其他子元素撑开了。这样就解决父级元素auto，浮动元素给父级元素带来的影响。

#！！清除浮动的几种样式（参考https://rainylog.com/post/what-methods-of-clearfix-can-i-use/）：

1、现代浏览器的最佳实践（这种方式不支持 IE6/7）：

.box::after{
    content: '';
    display: table;
    clear: both;
}

2、"Reloaded clearfix": (如果要支持老 Opera 浏览器，应使用 content: " ")

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

3、最佳实践，兼容IE6/7:

.box::after, .box::before{
    content: '';
    display: table;
}
.box::after{
    clear: both;
}
.box{
    zoom: 1;
}

4、利用溢出属性（关键点overflow: hidden）：

.box{
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

或者

.box{
    overflow: hidden; /* Clearfix! */
    zoom: 1; /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

又或者是，加下划线触发

.box{
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

5、父元素的同级元素直接写样式（so dirty)不推荐：

<div style="clear:both">含有浮动元素的box后面的元素</div>

效果：

总结：3>2>1=4, 5不推荐。1-5记忆：after-table-clear-both 、after-block-clear-both、 before-after-table-after-clear-both-box-zoom-one; content：空串省略；hidden-inline-block-block; style-clear-both。 1table 2block 3、complex-table 4overflow 5style。

注：容易忘记选择关键词记忆法。更多方法和记忆方法请留言。

炎炽枫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么要清除浮动？如何清除浮动。

浮动布局，脱离了标准文档流，漂浮在其上方。就想飞机在天上飞，大地是标准流。浮动布局的影响：父级元素若没有高度，设置auto,那父级元素则没有了高度，只能由父级元素下的其他子元素撑开，除非你给父级元素定义高度，但实际效果是你想取浮动元素的高度。上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
复制链接

扫一扫