前言

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

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.浮动元素的特点

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

浮动的元素会脱离标准流（盖不住文字），并且具备行内块显示特点。
浮动元素不能通过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中的浮动定位时，有几个重要的特点需要总结：

元素脱离文档流：浮动元素会脱离文档流，使其不再占据文档中的位置，其他元素会围绕着浮动元素排列。
文字环绕效果：浮动元素常用于创建文字环绕效果，使文字围绕在其周围。
实现多栏布局：通过浮动定位，可以轻松实现多栏布局，例如将内容分为左侧导航栏、主体内容和右侧侧边栏。
清除浮动：浮动元素可能导致父元素的高度塌陷，可以通过清除浮动的技术来解决这个问题，例如使用 clearfix 或者伪元素清除浮动。
自适应宽度：浮动元素可以根据可用空间自动调整宽度，适应不同屏幕大小和分辨率。
层叠顺序：浮动元素的层叠顺序比未浮动的元素更高，通常会覆盖在其上方。
应用场景广泛：浮动元素广泛应用于网页布局、图像排列、导航栏设计等方面，是CSS布局的重要组成部分。

一招弄懂浮动定位

前言

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

2.问题引入

3.浮动引入

4.浮动元素的特点

5.清除浮动

5.1给父元素设置宽高

5.2添加标签

5.3单伪元素清除法

5.4双伪元素清除法

5.5overflow

5.6什么是内外边距塌陷

6.小结