CSS（七）——视觉格式化模型（浮动）

CSS（七）——视觉格式化模型（浮动）

应用场景

1. 文字环绕

2. 横向排列

浮动的基本特点

实现浮动的效果可以修改css中的float的属性值。

• left：左浮动，元素靠上、靠左。

• right：有浮动，元素靠上、靠右。

/*浮动的默认值为none*/
float:none;

特点

1. 当一个元素浮动后，元素必定为块盒——display:block。（行盒只存在于常规流中）。
2. 浮动元素的包含块同样为父元素的内容盒。
3. 宽度为auto时，表示适应内容的宽度——没有内容的时候不会显示。
4. 高度为auto时，表示适应内容的高度——没有内容的时候不会显示。
5. margin为auto的时候，在浮动里面表示为0。
6. 边框、内边距、百分比设置与常规流一样。

盒子排列

1. 浮动盒子在包含块中排列时，会避开常规流块盒。

2. 常规流块盒在排列时，无视浮动盒子。

3. 行盒在排列时，会避开浮动盒子。

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

4. 外边距合并不会发生在浮动盒子中。

高度坍塌

根源

​ 常规流盒子的自动高度在计算时不会考虑浮动盒子。——当内容是常规流盒子时，外侧高度会依据内容的高度。否则会内部坍塌。

解决办法

使用clear属性。——在最后加一个元素，不需要任何其他属性，只需要将clear:both;

/*默认为none*/
clear:none;
/*left清除左浮动，该元素必须出现在左浮动盒子的下方*/
clear:clear;
/*right清除右浮动，该元素必须出现在左浮动盒子的下方*/
clear:right;
/*both清除左右浮动，该元素必须出现在所有浮动盒子的下方*/
clear:both;

上面的办法一般不会使用，所以有下面这种变种方法

<style>.parent::after{
            content: "";
            display: block;
            clear: both;
        }
</style>
    <div class="parent">
        <div class="left">1</div>
        <div class="left">2</div>
        <div class="left">3</div>
        <div class="left">4</div>
        <div class="left">5</div>
        <div class="left">6</div>
        <div class="left">7</div>
        <div class="left">8</div>
        <div class="item"></div>
</div>

在页面中一旦出现浮动元素，那么基本上会伴随着高度坍塌（重复一遍！基本上！），所以在使用浮动元素时最常见的做法就是在浮动元素的父元素中加一个伪元素选择器，设置最后一个伪元素中的清除浮动属性。

【注】：伪元素中必须有一个内容才可以生效，所以加入空串为内容值

总结

本篇笔记同样因为较为复杂，但是否先看总结差别不大。浮动的主要场景分为两个：一是文字环绕；二是横向排列。在说明这两个场景之前需要预先了解几个概念：

之前的笔记说过行盒和块盒的区别，在此不做赘述。

1. 首先，设定浮动使用float属性；当元素被设定为浮动时，必定为块盒。且浮动元素的包含块同样为父元素的内容盒。

2. 在浮动样式中，当宽度、高度以及margin设置为auto时，是以内容为基准。即：需要内容撑起该元素的样式。

3. 【注】：在边框内边距及百分比的设置中，与常规流一样。

4. 常规流盒子与浮动块的先后：

   1. 如果常规流盒子在前，则浮动盒子在排列时会避开常规流盒子；

   2. 如果浮动盒子在前，则常规流盒子会无视掉常规流盒子。

      **这一点可以用维度来理解，高等维度的生物可以观测同一维度以及更低维度的生命，却看不到比自己维度更高的生命。**常规流块在网页中属于二维概念，只是一个平面，而浮动元素漂浮在页面之上，则意味着浮动元素在排列时能观测到常规流所以选择避开；而常规流无法观测到浮动，所以会按照自己为基准。

   3. 行盒在排列时会避开浮动盒子。——这一点牢记吧，行盒的概念是不换行。

      即使文字在块盒里面存放，浏览器也会自动在文字与设定属性为块盒的元素之间自动生成一个属性为行盒的元素（我们看不到）。

5. 外边距的合并不会发生在浮动盒子中。

6. 高度坍塌的概念：常规流盒子的自动高度在计算时不会考虑浮动盒子。——当内容是常规流盒子时，外侧高度会依据内容的高度。否则会内部坍塌。

7. 高度坍塌的解决办法：使用伪元素选择器在高度坍塌的元素内增加一个元素。

   <style>.parent::after{
               content: "";
               display: block;
               clear: both;
           }
   </style>
   

   伪元素的内容不能为空，所以content为空串；行盒在排列时忽略浮动块，所以要设定display为block；clear属性表示清除浮动，即不忽略什么样子的浮动。both表示全不忽略