CSS之float和clear

最新推荐文章于 2025-04-16 15:22:06 发布

风月动情

最新推荐文章于 2025-04-16 15:22:06 发布

阅读量894

点赞数

分类专栏： css布局文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_48796380/article/details/123552920

版权

css布局专栏收录该内容

2 篇文章

订阅专栏

文章目录

CSS之float和clear
一、Float属性
二、Clear属性

CSS之float和clear

盒子布局是现在较为流行的网页布局方式，最近的几道经典面试题都与float及clear有关。“float是魔鬼，会影响其他相邻元素；但是clear是小白，其智慧影响自身，不会对其他相邻元素造成影响”——某位大牛

一、Float属性

float就是浮动，让元素脱离文档流，让元素漂浮起来，和普通的文档流不在同一个层面上。float是将元素左右移动而不能上下移动

高度坍塌

谈到float就不得不谈到高度坍塌，那么什么是高度坍塌呢？
上面我们讲到float是让元素脱离文档流，让其不处于普通的文档流，那这必然会引起没有内容将父元素撑起来，使其高度->0，就会造成父元素高度坍塌的情况。

<style>
        .father {
            border: 2px solid black;
        }
        
        .brother {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        
        .first {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
    
        .second {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        
        .third {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
<body>
    <div class="father">
        <div class="first">元素1</div>
        <div class="second">元素2</div>
        <div class="third">元素3</div>
        <!-- <div class="clear"></div> -->
    </div>
    <div class="brother">father的兄弟元素</div>
</body>

在这里插入图片描述
这就是所谓的高度坍塌，元素1，元素2，元素3都设置为了左浮动，导致父元素的上下边框贴在了一起，同时也遮住了兄弟元素的一部分。

解决办法

方法一：

给父元素添加overflow: hidden （建议）

 .father {
            border: 2px solid black;
            /* 清除浮动的常用方法 */
            overflow: hidden; 
        }

方法二：

通过父元素的伪类选择器

.father::after {
            /* 伪对象选择器结合content使用，给选中元素添加内容 */
            content: '';
            display: block;
            clear: both;
        }

方法三：

在被影响元素的后面添加一个空元素（不建议使用，给文档添加了无意义的元素结构）

 .clear {
            clear: both;
        }

问题解决：
在这里插入图片描述

字围现象

在上面的代码中我们发现父元素的高度坍塌会影响到其兄弟元素，遮住了一部分
在这里插入图片描述
虽然遮住了一部分的兄弟元素，但是文字却没有遮住，而这种现象就是float的字围现象。

讲完了float，我们再来看看clear

二、Clear属性

clear就是清除浮动，清除当前元素左右的浮动对象（不是将浮动对象删除），更具体一点就是当前元素的边不能和前面的浮动元素相邻 在这里插入图片描述
这样的布局就需要用到clear属性，当我们给元素1设置float：left时，元素2会贴到元素1后面。所以我们需要清除元素1对元素2产生的影响，给元素2添加一个clear：both或clear：left，这样元素2就会到下一行去。