浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改 float 属性值为：

left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右

默认值为 none

当一个元素浮动后，元素必定为块盒(更改 display 属性为 block)
浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

以下都是针对浮动元素而言：

宽度为 auto 时，适应内容宽度
高度为 auto 时，与常规流一致，适应内容的高度
margin 为 auto，为 0.
边框、内边距、百分比设置与常规流一样

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子考上靠右排列
浮动盒子在包含块中排列时，会避开常规流块盒(即会排列在常规流后方)
常规流块盒在排列时，无视浮动盒子(即浮动元素飘在天上)
行盒在排列时，会避开浮动盒子(图片环绕的原理，当在一个块元素中有文字，浏览器会自动加一个隐士的行盒。)
外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及 css 属性：clear

默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        background: lightblue;
        padding: 30px;
      }

      .item {
        width: 200px;
        height: 200px;
        background: red;
        margin: 6px;
        float: left;
      }

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

  <body>
    <div class="container clearfix">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="clear"></div>
      <!-- 必须排列在浮动元素的下方 -->
    </div>
  </body>
</html>

清除浮动的最佳实践

css

/* 使用伪元素来清除浮动 */
.clearfix::after {
  content: "";
  display: "block";
  clear: "both";
}

[扩展了解]浮动的其他特点

左浮动的盒子向上向左排列
右浮动的盒子向上向右排列
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

浮动 ​

应用场景 ​

浮动的基本特点 ​

盒子尺寸 ​

盒子排列 ​

高度坍塌 ​

清除浮动的最佳实践 ​

[扩展了解]浮动的其他特点 ​

浮动

应用场景

浮动的基本特点

盒子尺寸

盒子排列

高度坍塌

清除浮动的最佳实践

[扩展了解]浮动的其他特点