【自学CSS笔记第10篇】——CSS浮动及清除浮动（此一篇足以）

南斋孤鹤

已于 2022-11-13 11:16:22 修改

阅读量245

点赞数

分类专栏： CSS笔记文章标签： css 前端 html

于 2022-10-28 22:16:34 首次发布

本文链接：https://blog.csdn.net/m0_64231944/article/details/127579134

版权

CSS笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

每日反思：每天从起床到睡觉手机不离手，该用功的时候游戏不离手，该念的书没有念好，该学的技能也没学好，随波逐流、人云亦云，以后到了该自己独挡一面的时候，我该用什么来安慰自己？是酒精还是眼泪；

给父级元素添加： overflow：属性；

单伪元素清除法：

双伪元素清除法：

什么是标准流：

标准流是指：所有标签默认的排列效果；

什么是浮动：

浮动是指让元素脱离标准流，设置了浮动属性的元素会脱离标准普通流的控制。标准流无法满足我们想要的布局，所以我们让元素脱离标准流发热控制从而移动到我么想要的位置，但是这样也会伴随着浮动而带来影响浮动元素后面布局的问题：

为什么需要浮动？

很多布局效果，标准流布局无法完成，所以我们就需要设置浮动来改变元素（标签）默认的排列方式，让它听我们指挥。
举例说明：让多个块级元素在一行显示之间没有空隙；

方式1：标准流布局方式是将块级元素的display属性设置为inline-block，但这样虽然可以实现，如果你将代码换行写，他们之间就会有空白间隙，如果不换行写，代码的可读性就会很差，不能达到我们要的效果。
方式2：可以将这些块，都设置浮动（即添加float属性），并且浮动方向相同。那么他们之间就不会有空白间隙，达到了我们的要求；

语法格式：

选择器 {
float: 属性值;
}

属性值：

left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

浮动的特点：

浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动
元素浮动以后，元素会尽量向页面的左上或页面右上漂浮
浮动元素默认不会从父元素中移出
浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
浮动的显示模式相当于行内块元素；

为什么样清除浮动：

看一个案例：当父级元素没有设置高度（父级元素就不会占用标准流的位置，下面用案例证明），且子级元素添加了float属性（子级元素脱离标准流，也不占位置）那么这个时候浮动就影响下面的布局了，我们就该清除浮动了。

定义两个盒子，一个只给宽度、不给高度，另一个都给；

<div class="box"></div>
<div class="bottom"></div>

给每个盒子设置下面CSS设置；

        .box{
            width: 300px;
            /* height: 300px; */
            background-color: red;
        }
        .bottom{
            width: 300px;
            height: 300px;
            background-color: blue;
        }

预期的效果应当是，红色框在上面，蓝色在下面：但是结果却是这样的；

由此可见：没有设置宽高的盒子，也不占标准流的位置；设置了float属性的子级元素也不占标准流的位置，那么这个位置上就空了，当下面还有其他块儿时，自然而然下面的块儿就会补充到该位置，从而整个布局被打乱，出现块重叠问题；

从上面我们明白了什么是浮动，那清除浮动是干什么呢？就是当父级元素没有设置高度，且子级元素全部浮动，我们能想一个办法，让下面的布局不会上移打乱布局，下面五种解决的方法；

清除浮动的方式有哪些？

给父级元素加高度：

我们从出现问题的原因入手以解决问题，既然父级元素不加高度，并且其子级元素浮动会造成后面的布局出错，那我们就给父级元素添加高度；但是这样有一个缺陷：当我们在项目中要求父级元素不能设置高度是就不能用这个方法，所以这个办法不常用；

添加额外标签法：

既然在父级元素只设置宽，不设置高，形不成区域、且子级元素添加了float属性浮动起来，脱离标准流的控制；那么我们就通过添加额外标签以规定下方块儿的最高边界（就相当于给马路中间起一道墙，告诉右面的人，这是界线你不能过去！）；那么如何添加呢？在父级元素内容的最后添加一个块元素，并给该块级元素设置CSS，设置如下：