【面试篇】当面试官叫你谈谈浮动 关于它的特性你了解多少？

C4rTryn思诚2023-11-01 10:47

一、JS三种元素布局类型

我们大家都知道在JS中有三种常见的元素布局类型：块级元素、行内块元素和行内元素。在讲浮动之前让我们再回顾一下这三种元素布局类型吧....

1. 块级元素（Block-level Elements）

块级元素占据一整行的宽度，独自成为一个矩形框。可以设置宽度、高度、边距（margin）和内边距（padding）等属性。常见的块级元素包括 <div>、<p>、<h1>~<h6> 等。

css 复制代码 
<style>
        *{
            margin: 0;padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
        }
        p{
            width: 100px;
            height: 50px;
        }
</style>
html 复制代码 
<div>This is a block-level element.</div>
<p>This is another block-level element.</p>

从上面代码和运行结果来看我们总结一下块级元素的特点：

  1. 默认占据一整行

  2. 可以设置宽高

2. 行内块元素（Inline-block Elements）

行内块元素就像是行内元素一样被布局，但同时具有块级元素的特点。行内块元素可以设置宽度、高度和边距等属性，但不会强制换行，多个行内块元素可以在同一行显示。常见的行内块元素包括 <span>、<img>、<button> 等。

css 复制代码 
<style>
        *{
            margin: 0;padding: 0;
        }
        span{
            width: 200px;
            height: 200px;
        }
        button{
            width: 100px;
            height: 50px;
        }
</style>
html 复制代码 
<span style="display: inline-block;">This is an inline-block element.</span>
<button style="display: inline-block;">This is another inline-block element.</button>

从上面代码和运行结果来看我们总结一下行内块元素的特点：

  1. 可以同行显示

  2. 可以设置宽高

3. 行内元素（Inline Elements）

行内元素不会独占一行，只会根据内容尺寸进行布局，并且不能设置宽度、高度、边距等属性。常见的行内元素包括 <a>、<strong>、<em> 等。

html 复制代码 
<a href="#">This is an inline element.</a>
<strong>This is another inline element.</strong>

我们可以看到不加CSS前这两个元素可以在同一行显示，但是是否可以设置宽高呢？我们把CSS属性加上后

CSS 复制代码 
<style>
        *{
            margin: 0;padding: 0;
        }
        a{
            width: 200px;
            height: 200px;
        }
        strong{
            width: 100px;
            height: 50px;
        }
    </style>

从上面代码和运行结果来看我们总结一下行内元素的特点：

  1. 可以同行显示

  2. 不能设置宽高

二、 浮动元素

CSS浮动（float）是一种布局技术，用于控制元素在网页中的位置。通过设置元素的浮动属性，可以让元素向左或向右浮动，并让其他元素环绕在其周围。 要使用CSS浮动，需要给元素设置浮动属性。常用的浮动属性值有：

  • float: left;：将元素向左浮动。
  • float: right;：将元素向右浮动。

浮动元素会脱离正常的文档流，其他非浮动的元素会环绕在其周围。浮动这个功能有利有弊，当初设计师设计浮动是用来实现文字环绕功能，但是额外浮动还带来了一些其他便利和弊端，借助通俗易懂的代码和文字让我们拿捏这次文章的重点之一 浮动。

1. 实现文字环绕

css 复制代码 
<style>
        .img{
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
html 复制代码 
<div class="img"></div>
    <div class="text">2021年2月25日，全国脱贫攻坚总结表彰大会在北京人民大会堂隆重举行。会上，替女儿戴上大红花的老父亲黄忠杰听到全国脱贫攻坚楷模黄文秀的名字时，洒下泪水。
        黄文秀生前为广西壮族自治区百色市委宣传部派驻乐业县新化镇百坭村驻村第一书记，2019年6月17日牺牲在脱贫攻坚一线，献出了年仅30岁的宝贵生命。
        2021年，总有一些瞬间让我们铭记。那些奋斗、欢笑、泪水、拥抱和鼓励汇集成的感动，温暖着你我前行的脚步。</div>

由于插入的图片和文字都是块级元素，所以我们看到两个元素不能在同一行显示，如果要实现文字环绕于图片周围我们就可以用到float:... ,比如我们想让图片环绕在文字的左侧

css 复制代码 
<style>
        .img{
            height: 100px;
            width: 100px;
            background-color: red;
            float:left
        }
    </style>

我们在页面中可以看见文本的所占区域为一整行包括了图片所在区域，因为图片被设置了浮动属性也就脱离了文档流，自然而然位置就被文字所顶替了位置，但是文字为啥不会到图片下面去呢？

这是因为在文档流中，元素的位置和大小是相互关联的，每个元素都会占用一定的空间。因此，即使一个元素脱离了文档流，其他正常流中的元素也会根据自身大小和位置进行布局，而不会与脱离文档流的元素发生重叠。

2. 让块级元素同行显示

理论来说块级元素是不能在同一行的

css 复制代码 
<style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        .item1{
            background-color: #e2210c;
        }
        .item2{
            background-color: #1de90e;
        }

        .item3{
            background-color: #1e06f6;
        }
    </style>
html 复制代码 
<body>
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</body>

于是我们为整个div加上浮动特性

css 复制代码 
<style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            float:left
        }
        .item1{
            background-color: #e2210c;
        }
        .item2{
            background-color: #1de90e;
        }

        .item3{
            background-color: #1e06f6;
        }
    </style>

这样原本不能在同一行显示的块级元素这时就出现在了同一行，但是这也带来了什么弊端呢

我们可以看见body的高度变成了0，原因是body本身没有设置大小，其里面原本的元素都脱离了文档流，故没有子元素能够撑开它的高度，最后导致body的高度为0，在后面我们再来讨论这个问题造成的影响和解决方法。

3. 让行内元素可以设置宽高

行内元素我们在上文得知是无法设置宽高的，但当我们给行内元素添加浮动属性和宽高属性时会发生什么

我们先看初始样式

CSS 复制代码 
<style>
        *{
            margin: 0;padding: 0;
        }
        a{
            width: 200px;
            height: 200px;
            float:left;
        }
        strong{
            width: 100px;
            height: 50px;
            float:left;
        }
    </style>

很神奇地，原本不能设置宽高的行内元素也可以设置宽高了，这也是浮动带来的特性之一。

浮动元素可以使用margin来设置外边距但是不能使用margin：0 auto实现水平居中

我们知道普通元素可以靠margin:0 auto来实现水平居中对齐的效果，但是浮动元素可以吗

css 复制代码 
<style>
        div{
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        .item1{
            background-color: #e2210c;
        }
        .item2{
            background-color: #1de90e;
        }
        .item3{
            background-color: #1e06f6;
        }
    </style>

我们可以看到普通元素依靠margin:0 auto实现了水平方向的居中，但是当我们给元素添加上浮动后就会居中就会失效

css 复制代码 
<style>
        div{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            float:left;
        }
        .item1{
            background-color: #e2210c;
        }
        .item2{
            background-color: #1de90e;
        }
        .item3{
            background-color: #1e06f6;
        }
    </style>

浮动元素不能像普通元素一样使用 margin: 0 auto; 来实现水平居中对齐的效果，是因为浮动会使元素的宽度变为内容的宽度，而不是父容器的宽度。

在普通元素中，如果将一个元素设置了固定宽度，并将其左右外边距都设置为 auto，则该元素将相对于其父元素水平居中。这是因为普通元素的宽度是基于包含块的宽度计算的，而外边距的自动计算可以将剩余的空间平均分配到左右两侧，从而使元素居中对齐。

但是，对于浮动元素来说，它们的宽度默认是由内容撑开的，而不是由父元素决定的。当我们将一个浮动元素的左右外边距设置为 auto 时，其实就是告诉浏览器将剩余的空间平均分配到两侧，但是因为浮动元素的宽度并不受限制，所以无法实现水平居中对齐的效果。

三、清除浮动

清除浮动也是面试官很喜欢"了解"的知识，因为他可能只会叫你谈谈浮动，如果你对浮动了解得够深刻，自然也知道浮动的利弊，所以浮动带来的什么缺点和解决方法才是他想听的。

1. 浮动的缺点

  • 布局混乱：当过多的元素浮动时，可能导致布局变得混乱，特别是在没有正确清除浮动的情况下。浮动元素可能会相互重叠、覆盖或溢出其容器。

  • 父容器高度塌陷：浮动元素脱离了文档流，这意味着它们不会撑开父容器的高度。如果父容器没有设置明确的高度，那么父容器的高度将会塌陷，导致父容器无法完全包含浮动元素以及其后续内容。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;padding: 0; /*将body自带的内边距外边距去掉*/
    }
    ul li{
      list-style: none; /*将无序列表前的符号去掉*/
      width: 200px;
      height: 100px;
      float: left;
    }
    li:nth-child(1) {
      background: #da8383;
    }
    li:nth-child(2) {
      background: #e1e941;
    }
    li:nth-child(3) {
      background: #6ceb50;
    }
    .text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="text">Hello World</div>
  </div>
</body>
</html>

我们发现text的高度被浮动元素给覆盖了，这可能导致布局变得混乱，我们可以通过以下方法解决

2. 给父容器设置高度用于 清除浮动

这是最直接但是最不优雅的办法，这样写不仅需要编写额外的代码，增加了布局的复杂性和维护成本。此外，当页面发生变化时，可能需要对代码进行更改,一般不用此方法。

3. 添加新元素用于 清除浮动

我们还可以在最后一个浮动元素之后添加新的元素，在新元素上做 清除浮动 （clear：left or right or both）

css 复制代码 
.clear{
      clear: both;
    }
html 复制代码 
<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div class="clear"></div>
    </ul>

4. 在父容器伪元素after上做 清除浮动

css 复制代码 
.clear::after{
      content: '';
      clear: both;
      display: block;
    }
html 复制代码 
<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div class="clear"></div>
    </ul>

5. 在下方被浮动影响的容器上做 清除浮动

css 复制代码 
ul li{
      list-style: none;
      width: 200px;
      height: 100px;
      float: left;
    }
.text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
      clear: both;
    }

这个方法其实类似于添加伪元素进行清除浮动处理，只能说略简洁于伪元素，不用额外再添加一个元素专门用来清除浮动，但是这个有点反人类，毕竟浮动产生的负面影响是浮动元素自己产生的，还得让他们下方元素充当大怨种来帮忙收尾，不仅如此同伪元素方法一样如果下方元素多了起来，像这样一个个处理会十分麻烦。

6. BFC（Block Formatting Context）

在上面我们已经对浮动有了比较清晰的概念了，浮动看起来就像是一个级别特别高的"大哥大"，脱离了文档流，与谁也不产生瓜葛，但是我们还有以为更是重量级，可以用于清除浮动的负面影响，目前前端程序员用来清除浮动广泛使用的就是BFC。为了使文章通篇不会冗杂繁琐，我会留更多精力在后续文章为大家讲解BFC。

  • 哪些属性可以创建BFC：

  1. float: left || right

  2. position: absolute || fixed

  3. display: inline-block

  4. display: table-cell ....

  5. overflow: hidden || auto || overly || scroll

  6. 弹性盒子 (display : flex || inline-flex)

总结

md 复制代码 
# 块级
1. 默认占据一整行
2. `可以`设置宽高
# 行内块
1. 可以同行显示
2. `可以`设置宽高
# 行内
1. 可以同行显示
2. `不能`设置宽高
# 浮动元素
1. 文字环绕
2. 脱离文档流
3. 让块级元素同行显示
4. 让行内元素可以设置宽高
5. 可以使用margin设置外边距但是不能使用margin：0 auto来居中
# 清除浮动
1. 给父容器设置宽高
2. 在最后一个浮动元素之后添加新的元素，再新元素上做 清除浮动 （clear：``left`` or `right` or `both`）
3. 在父容器伪元素after上做 清除浮动
4. 在下方被浮动影响的容器上做 清除浮动
5. BFC

感谢大家的阅读，点点赞吧♥

如果想了解更多有用的干货，点赞+收藏第一时间获取有用的小知识

开源Git仓库: gitee.com/cheng-bingw...

更多内容：【面试篇】重温CSS盒模型 扎实基础RUN不停

相关推荐
吕彬-前端11 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（二）
前端·react.js·前端框架
小白小白从不日白32 分钟前
react hooks--useCallback
前端·react.js·前端框架
恩婧40 分钟前
React项目中使用发布订阅模式
前端·react.js·前端框架·发布订阅模式
mez_Blog41 分钟前
个人小结（2.0）
前端·javascript·vue.js·学习·typescript
珊珊而川1 小时前
【浏览器面试真题】sessionStorage和localStorage
前端·javascript·面试
森叶1 小时前
Electron 安装包 asar 解压定位问题实战
前端·javascript·electron
drebander1 小时前
ubuntu 安装 chrome 及 版本匹配的 chromedriver
前端·chrome
软件技术NINI1 小时前
html知识点框架
前端·html
深情废杨杨1 小时前
前端vue-插值表达式和v-html的区别
前端·javascript·vue.js
GHUIJS1 小时前
【vue3】vue3.3新特性真香
前端·javascript·vue.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07Coze扣子平台完整体验和实践（附国内和国际版对比）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10借助 LocatorJS ，快速定位本地代码