CSS系列之浮动

鱼馅饼

已于 2023-09-10 21:40:00 修改

阅读量438

点赞数 4

文章标签： css 前端

于 2023-07-29 13:34:09 首次发布

本文链接：https://blog.csdn.net/StayAlive1887/article/details/131993977

版权

一.欢迎来到我的酒馆

介绍css浮动属性。

二.什么是浮动

2.1 什么是浮动
浮动（float）是一个css属性，它本质是用来实现图文环绕的效果，但后来被用作布局使用。一个元素设置了float属性，这就意味着一个元素应沿其容器的左侧或右侧放置，这个元素允许文本和内联元素环绕它。该元素会从网页的标准流中移出，脱标。浮动之后，会使元素向左或向右移动，其周围的元素也会重新排列。float属性定义元素在哪个方向浮动，在以前这个属性总是应用于图片，用于实现图文环绕的效果。在css中，任何元素都可以浮动。
2.2 浮动的背景知识
最初，引入float属性为了能让web开发人员实现简单的布局。这里和之前提到的：float属性本质上是为了实现图文环绕的效果。这里相矛盾，到底float属性最初是用来干嘛的，目前也不太清除，这有待于后期的深入研究。不过，这里我更倾向于第二种，也就是float属性是为了实现简单的布局。一个元素浮动后，文字环绕在它的左边或右边，这个通常在新闻排版可以看到。
在这里插入图片描述

2.2.图文环绕效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <img src="./意大利美味披萨.jpg" />
    <p>
      玛格丽特乃意式披萨的经典是意大利那不勒斯的披萨师在迎接玛格丽特皇后时的创意之作🍕也是我认为颜值最高
      口味最纯粹的披萨 就让我们从饼皮开始 制作一张完整地道的玛格丽特吧👩‍🍳
    </p>
  </body>
</html>

main.css:

img {
  float: left;
}

输出：
在这里插入图片描述

2.3 在布局中使用float属性
一般情况下，块级元素会独占一行显示。要想让块级元素在一行显示，第一种方法可以使用属性：display: inline-block。将块级元素转换为内联元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

index.css:

div {
  display: inline-block; /*将块级元素转换成内联元素，使得块级元素可以在一行显示*/
  width: 100px;
  height: 100px;
}
.one {
  background-color: pink;
}
.two {
  background-color: skyblue;
}

输出：
在这里插入图片描述
要想清除这个间隙，书写标签的时候，不换行：

...
    <div class="one"></div><div class="two"></div>
...

这样就解决了行内元素之间有间隙的问题：
在这里插入图片描述
第二种方法，可以使用浮动属性：float。对div标签添加float属性。

div {
  width: 100px;
  height: 100px;
  float: left;
}

让两个div都向左浮动，这样也可以使得块级元素在一行显示。

三.浮动带来的塌陷问题

上面介绍过了，使用浮动属性可以使得块级元素在一行显示。在标准的文档流中，若父元素没有设置高度，那么父元素的高度默认是被子元素撑开的，即子元素有多高，父元素就有多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，父元素还在文档流中，此时父元素的高度就没有子元素撑起（子元素无法撑起父元素的高度），从而导致父元素的高度塌陷。
简而言之，包含含有浮动的元素的盒子高度变为0，下面的元素会上去，这样会导致布局混乱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="./main.css" rel="stylesheet"/>
</head>
<body>
    <div class="main">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="next"><p>一分秋意一分寒，一声问候一身暖。</p>
    </div>
</body>
</html>

main.css:

.main{
    height: 300px;
    width: 500px;
    background-color: #ccc;
}
.one{
    width: 100px;
    height: 100px;
    background-color: pink;
}
.two{
    width: 100px;
    height: 100px;
    background-color: orange;
}

输出：
在这里插入图片描述
在一般情况下，div和p标签都是块级元素，在文档流中会独占一行显示。如果我们给块级元素添加浮动之后，它会脱离文档流，并且会释放所占用的空间。释放占用空间很好理解，就是不占地了，可问题是：如果父级元素不设置高度，默认父级元素的高度会由子级元素撑开，即子级元素有多大，父级元素就会有多大。当子级元素设置浮动之后，它会脱离标准的文档流，子级元素此时浮动了，不在占地方了，父级元素的高无法撑开，高度变为0，高度不在是由子级元素撑开。下面的元素会上去。
main.css:

.main{
    width: 500px;
    background-color: #ccc;
}
.one{
    float: right;
    width: 100px;
    height: 100px;
    background-color: pink;
}
.two{
    float: right;
    width: 100px;
    height: 100px;
    background-color: orange;
}

输出：
在这里插入图片描述
可以看到，给子级元素都设置右浮动之后，父级元素的高度会变为0（看不到灰色背景），下边的p元素会上去。

四.清除浮动带来的影响

块级元素会独占一行显示，也就是一行接着一行，自上而下排列。设置浮动之后，他就会竖着显示，因此可以用来布局。但浮动之后，会带来一个高度塌陷问题。就是子级元素设置浮动之后，空间释放，不占地了，子级元素此时无法撑开父级元素的高度，因此父级元素的高度会变为0，父元素会默认自己里面没有任何内容。（前提是未给父级元素设置固定高度，如果父级元素本身有固定的高度，就不会出现这种情况）
父元素高度塌陷，可以使用clear属性，来清除浮动，clear属性有3个值：

left: 清除左浮动
right：清除右浮动
both：左右的浮动都清除
我们可以给浮动元素的下边的元素添加clear属性，就可以解决父元素高度塌陷问题。

p{
    background-color: yellow;
    clear:both; /*左右浮动都清除，作用是清除浮动带来的影响*/
}

在这里插入图片描述

五.如何清除浮动

5.1 清除浮动
有时，你可能想要一个元素移动到任何浮动元素的下方，这时候由于上一层的块级元素的子级元素设置为浮动，上一层的父级元素高度如果是由子级元素撑开的话，子级元素设置为浮动，那么父级元素高度会塌陷，高度变为0。
要解决这个问题，就需要清除浮动带来的影响。可以使用clear属性来清除浮动。clear属性指定一个元素是否必须移动到它之前的浮动元素下边。clear属性适用于浮动元素和非浮动元素。
5.2 清除浮动方法一：

/*给下一层的元素添加clear属性*/
clear: left; /*清除左浮动*/
clear: right;/*清除右浮动*/
clear: both;/*左右浮动都清除*/

清除浮动方法二：

/*在浮动元素的后边添加一个伪元素*/
.main::after{
	content:"";
	display: block;
	clear: both;
}

::after

::after作用是用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。例如，有如下结构的html代码：

<div class="main">
    <div class="one">one</div>
    <div class="two">two</div>
</div>

css代码：

.main::after{
    content: "pseudo class";
    display: block;
}

输出：

one
two
pseudo class

::after的内部工作原理：
在这里插入图片描述

这样我们就给一个class名为main的元素，通过使用伪元素来清除浮动。但是这也有一点复杂，清除一个浮动需要写一遍上面的代码，清除两个浮动就要写两个，因此，我们可以将清除浮动的css单独提取出来，封装成一个新的类，只要有清除浮动的需求，只需要引入这个类就可以了。一般情况下，这个类名会叫做clearifix：

.clearfix::after{
	content:"";
	display:block;
	clear:both;
}

这样就提取了一个清除浮动的类，在HTML中使用：

<div class="main clearfix">
    <div class="one"></div>
    <div class="two"></div>
</div>

清除浮动方法三：
还可以通过使用css属性overflow：hidden。overflow：hidden属性是用于内容溢出隐藏，这里可以用来解决塌陷的问题。给父级元素添加这个属性，子元素浮动之后，不会出现塌陷的问题：

.main{
    overflow: hidden;
    width: 500px;
    background-color: #ccc;
}

清除浮动方法四：
我们知道，父元素出现塌陷问题的本质是：没有给父元素设置高度。高度是由子元素撑开，子元素浮动后，脱离文档流，释放空间，此时父元素会认为自己里面没有任何内容。因此，解决办法是：手动给父级元素添加一个高度：

.main{
    height: 300px
    width: 500px;
    background-color: #ccc;
}

这是一种笨的方法，但也可以解决父元素塌陷的问题。

六.写在最后

使用的开发工具：vs code。
本章节的项目源码：css系列之浮动源码下载

css系列之浮动完结。有关于浮动的内容暂时先介绍到这里。大家有什么不明白的问题，可以在评论下方留言。如果发现有错误或有待提高的地方，欢迎指正！

鱼馅饼

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS系列之浮动

浮动的由来：块级元素在一行显示，可以使用属性：display: inline-block；浏览器在解析行内块或行内标签的时候，如果标签换行书写会产生一定的距离。两个div转成 inline-block 的时候，可以并排显示，但会有一定的距离，这个距离是因为写div标签的时候换行写了。
复制链接

扫一扫