一招弄懂浮动定位

Fipped2024-05-13 14:03

前言

想象一下，你在一场盛大的狗狗派对上，大家都在欢快地跳舞。浮动定位就像是一只顽皮的小狗，它跟着你走，但总是有点不安分，时不时就跑到你身边来，有时候还会把你搞得乱七八糟。但别担心，只要你掌握了正确的方法，就能轻松地把它们训练成顺从的宠物，而不是让它们成为派对里的调皮捣蛋者。

1.结构伪类选择器和伪元素

我们首先来了解一下结构伪类选择器，是用来匹配选择到的元素。

而伪元素是用css的方式来创建HTML的标签

2.问题引入

xml 复制代码 
<!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>
    .one {
      width: 200px;
      height: 200px;
      background-color: pink;
      display: inline-block;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: blue;
      display: inline-block;
    }
  </style>
</head>

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

</html>

我们可以发现。浏览器在解析两个标签时，会因为换行的方式让我们的标签默认有间距，那么我们该怎么改变呢？

3.浮动引入

xml 复制代码 
<!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>
    .one {
      width: 200px;
      height: 200px;
      background-color: pink;
      float: left;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: blue;
      float: left;

    }
  </style>
</head>

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

</html>

我们通过引入浮动的方式，就不会产生间隙了，因此浮动是解决问题的一个好方法。

4.浮动元素的特点

那么浮动的元素具备哪些特点呢？

  1. 浮动的元素会脱离标准流（盖不住文字），并且具备行内块显示特点。
  2. 浮动元素不能通过margin ：0 auto 居中

5.清除浮动

浮动既然如此好用，那么是否有缺陷呢？答案肯定是有的。

xml 复制代码 
<!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>
    .big {
      width: 1000px;
      margin: 0 auto;
      background-color: purple;
    }

    .left {
      width: 400px;
      height: 400px;
      background-color: pink;
      float: left;
    }

    .right {
      width: 500px;
      height: 400px;
      background-color: blue;
      float: right;
    }

    .bottom {
      width: 1000px;
      height: 100px;
      background-color: black;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

当父级元素不设置高度，而我们希望用子级元素撑开父级高度时，一旦都是浮动，那么会导致下一个元素往上占有位置，这是由于浮动元素的本身特点决定的。

5.1给父元素设置宽高

我们可以通过给父元素设置宽高的方式来达到清除浮动带来的影响。这是最直接的方法。

5.2添加标签

xml 复制代码 
<!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>
    .big {
      width: 1000px;
      margin: 0 auto;
      background-color: purple;
    }

    .left {
      width: 400px;
      height: 400px;
      background-color: pink;
      float: left;
    }

    .right {
      width: 500px;
      height: 400px;
      background-color: blue;
      float: right;
    }

    .bottom {
      width: 1000px;
      height: 100px;
      background-color: black;
      margin: 0 auto;
    }

    .clearfix {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

我们可以发现，通过增加一个末尾标签的方式，我们设置属性clear：both，可以达到清除浮动的效果。

5.3单伪元素清除法

xml 复制代码 
<!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>
    .big {
      width: 1000px;
      margin: 0 auto;
      background-color: purple;
    }

    .left {
      width: 400px;
      height: 400px;
      background-color: pink;
      float: left;
    }

    .right {
      width: 500px;
      height: 400px;
      background-color: blue;
      float: right;
    }

    .bottom {
      width: 1000px;
      height: 100px;
      background-color: black;
      margin: 0 auto;
    }

    .big::after {
      content: '';
      display: block;
      clear: both;
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

最后实现效果一样，但是省去了要添加标签。本质和标签法是一样的。

5.4双伪元素清除法

xml 复制代码 
<!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>
    .big {
      width: 1000px;
      margin: 0 auto;
      background-color: purple;
    }

    .left {
      width: 400px;
      height: 400px;
      background-color: pink;
      float: left;
    }

    .right {
      width: 500px;
      height: 400px;
      background-color: blue;
      float: right;
    }

    .bottom {
      width: 1000px;
      height: 100px;
      background-color: black;
      margin: 0 auto;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
    }

    .clearfix::after {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="big clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

双伪元素除了可以清除浮动之外，还可以解决内外边距塌陷的问题，是一种常见的方法。

5.5overflow

这是最简单的一个方法，我们设置父元素overflow:hidden,就可以解决浮动带来的问题，也可以解决内外边距的塌陷。

xml 复制代码 
<!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>
    .big {
      width: 1000px;
      margin: 0 auto;
      background-color: purple;
      overflow: hidden;
    }

    .left {
      width: 400px;
      height: 400px;
      background-color: pink;
      float: left;
    }

    .right {
      width: 500px;
      height: 400px;
      background-color: blue;
      float: right;
    }

    .bottom {
      width: 1000px;
      height: 100px;
      background-color: black;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

</html>

5.6什么是内外边距塌陷

6.小结

当谈到CSS中的浮动定位时，有几个重要的特点需要总结：

  1. 元素脱离文档流：浮动元素会脱离文档流，使其不再占据文档中的位置，其他元素会围绕着浮动元素排列。
  2. 文字环绕效果：浮动元素常用于创建文字环绕效果，使文字围绕在其周围。
  3. 实现多栏布局：通过浮动定位，可以轻松实现多栏布局，例如将内容分为左侧导航栏、主体内容和右侧侧边栏。
  4. 清除浮动：浮动元素可能导致父元素的高度塌陷，可以通过清除浮动的技术来解决这个问题，例如使用 clearfix 或者伪元素清除浮动。
  5. 自适应宽度：浮动元素可以根据可用空间自动调整宽度，适应不同屏幕大小和分辨率。
  6. 层叠顺序：浮动元素的层叠顺序比未浮动的元素更高，通常会覆盖在其上方。
  7. 应用场景广泛：浮动元素广泛应用于网页布局、图像排列、导航栏设计等方面，是CSS布局的重要组成部分。
相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了，像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10Mac cursor设置jdk、Maven版本