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

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不停

相关推荐
zengyuhan5034 分钟前
Windows BLE 开发指南（Rust windows-rs)
前端·rust
醉方休7 分钟前
Webpack loader 的执行机制
前端·webpack·rust
前端老宋Running15 分钟前
一次从“卡顿地狱”到“丝般顺滑”的 React 搜索优化实战
前端·react.js·掘金日报
隔壁的大叔15 分钟前
如何自己构建一个Markdown增量渲染器
前端·javascript
用户44455436542618 分钟前
Android的自定义View
前端
WILLF18 分钟前
HTML iframe 标签
前端·javascript
枫，为落叶36 分钟前
Axios使用教程(一）
前端
小章鱼学前端41 分钟前
2025 年最新 Fabric.js 实战：一个完整可上线的图片选区标注组件（含全部源码）.
前端·vue.js
ohyeah42 分钟前
JavaScript 词法作用域、作用域链与闭包：从代码看机制
前端·javascript
流星稍逝44 分钟前
手搓一个简简单单进度条
前端
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南08Labelme从安装到标注：零基础完整指南09全球最强模型Grok4，国内已可免费使用！（附教程）1046个Nano-banana 精选提示词，持续更新中