CSS核心（三十八）清除浮动带来的影响--让浮动元素使用标准流的特性

人亦已歌 · 发表于 2023-2-1 13:00:45

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动带来的影响--让浮动元素使用标准流的特性</title>
</head>
<style>
        .box{
                width:400px;
                background:#f00;
                /* 方法三 给父元素设置overflow:auto; */
                /* overflow:auto; */
        }
        .box div{
                width:100px;
                height:200px;
                float:left;
        }
        .s1{
                background:pink;
        }
        .s2{
                background:#00f;        
        }
        .s3{
                background:#ff0;        
        }
        .laowang{
                width:350px;
                height:200px;
                background:#0f0;        
        }
        /* 方法一、在浮动元素的父级元素下方写一个空div，然后设置样式为clear:both; */
        /*.clear{
                clear:both;                
        }*/
        /* 方法二、使用伪元素清除浮动（推荐） */
        .box:after{
                content:"";
                display:block;
                clear:both;        
        }
</style>
<body>
<div class="box">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
</div>
<!-- <div class="clear"></div><!-- 清除浮动带来影响的空标签必须是一个块元素 -->
<div class="laowang"></div>
</body>
</html>

解释一下：
以上代码中，我们给父级元素div下的3个子级元素div设置了左浮动，此时，由于这三个子级div已经脱离了标准流，所以不占用标准流的空间。
如果不做处理，显示结果应该如下图所示：

CSS核心（三十八）清除浮动带来的影响--让浮动元素使用标准流的特性

在代码中我们使用了三种方式让浮动的元素占用标准流的空间。
1、在浮动元素的父级元素下方写一个空div，然后设置样式为clear:both;
2、使用伪元素清除浮动（推荐）
3、给父元素设置overflow:auto;

以上任意一种方法设置后的结果都如下图所示：

CSS核心（三十八）清除浮动带来的影响--让浮动元素使用标准流的特性

黎明之雨 · 发表于 2023-2-18 07:22:25

真的不错，佩服佩服！

cosf · 发表于 2023-2-26 04:39:31

三人行，必有我师

女王 · 发表于 2023-3-1 20:59:38

受益非浅，相见恨晚！首先，祝楼主和所有论坛的朋友新年快乐！！！其次，谢谢楼主和我们分享你的经验！！！其实经验也是一种财富！！！谢谢你把你的财富与我们共享！！！看了这篇文章感触颇多！！！其中两点最为深刻！！！ 1.应聘不成功，只能说明我们不够好！！正应为我们不够好，所以我们必须更加努力！！ 2.要正视自己，端正自己的目的，不断从自身寻找问题，解决问题！！！我也觉得还是应该学会写，然后才去解决优化的问题顶,学习永远都是无止境的,看来大家都要努力了!!