前言

浮动布局是CSS中用于创建多列和文本环绕效果的技术。通过设置元素为左浮或右浮，可实现并排显示和内容环绕，适用于多栏布局和图片嵌入文本。虽有局限性，如父元素高度塌陷问题，但结合清除浮动技巧，仍为网页设计提供灵活性和高效性能。

浮动布局的效果

1.实现文字环绕效果

不设置float标签的情况下：

加上float标签后

2. 会导致一个元素脱离文档流

我们检查页面元素可以看到p标签和image标签重叠了，标签重叠就说明某个标签脱离了文档流。

注意，float只有left和right，没有top

3.可以让块级元素水平排列

li标签是块级元素，所以它们在页面上的显示不会在同一行

加入float标签后：

三个li去到了同一行，而且我们查看元素可以发现，ul是没有高度的，因为ul里的子标签全部都浮动了，没有元素去撑开ul，所以高度为0

代码：

<style>
    li {
      list-style: none;
      font-size: 20px;
    }
    .item{
      width: 200px;
      height: 50px;
      float: left;
    }
    .item:first-child{
      background-color: rgb(149, 74, 74);
    }
    .item:nth-child(2){
      background-color: rgb(71, 71, 139);
    }
    .item:last-child{
      background-color: rgb(73, 148, 73);
    }
  </style>
</head>
<body>
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
  </ul>
</body>

4.浮动元素可以用 marign, 但是不能使用 margin: 0 auto;

`margin: 0 auto;`与浮动元素的冲突

浮动元素的特性：浮动元素会脱离正常的文档流，允许其他内容环绕它。float属性决定了元素应该向左或向右对齐，而不是居中。
margin: 0 auto;的作用：这个CSS属性是用于在左右两边分配相等的外边距，从而实现水平居中。但是，当元素浮动时，margin: 0 auto;的效果会被忽略，因为它试图在浮动元素上进行水平居中操作，而这与浮动元素的布局逻辑不符。

示例

<div class="floated">
  浮动元素
</div>

floated {
float: left;
width: 200px;
height: 200px;
background-color: lightblue;
margin: 0 auto;
}

在这种情况下，margin: 0 auto;不会使.floated元素居中。相反，由于float: left;的存在，元素会向左浮动，并且margin: 0 auto;中的auto值不会被解析为水平居中的指令，而是被视为默认值（即0），因此margin实际上等同于margin: 0 0;。

清除浮动

清除浮动并不是把浮动清除掉，而是解决一些元素在浮动中受到的影响。

以下是几种常用的清除浮动的方法：

设置父元素高度
在父元素结束之前添加一个空元素，并设置 clear: both;
借助伪元素 ::after 清除浮动
把父容器设置成 BFC 容器

接下来进行逐一介绍：

1. 设置父元素高度

最简单粗暴的办法就是直接设置父元素宽度：

   ul{
      height: 50px;//已知li的高度都是50px
    }

这种方法并不是真正的“清除浮动”，而是通过给父元素设置一个明确的高度来避免高度塌陷。然而，这种方法不够灵活，因为需要预先知道或计算出确切的高度值。

2. 在父元素结束之前添加一个空元素，并设置 clear: both;

这种方法涉及在浮动元素之后插入一个额外的元素，并设置其clear属性为both。这样可以阻止后续元素继续环绕浮动元素，从而间接“清除”浮动的影响。

    .clear{
      clear: both;
    }

<body>
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <div class="clear"></div>
  </ul>

  <div class="title">这是标题</div>

</body>

3. 借助伪元素 ::after 清除浮动

这是最常用的方法之一，通过在父元素后添加一个伪元素::after并设置clear: both;或display: block; content: "";以及clear: both;来清除浮动。通常还需要将父元素设置为相对定位(position: relative;)，以便伪元素能正确工作。

  ul::after{
      content: '';
      clear: both;
      display: block;
    }

4. 把父容器设置成 BFC 容器

BFC是CSS中的一个概念，用于描述块级元素如何在其内部进行布局。将一个元素设置为BFC容器可以自动清除其内部的浮动。这可以通过overflow属性设置为auto、hidden或scroll，或者通过display属性设置为flex或grid来实现。

    ul{
      overflow: auto;
    }

结语

以上就是关于浮动和清除浮动的介绍，希望本篇文章对你有所帮助，感谢阅读！

浮动布局与清除浮动

前言