浮动

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

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为：

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

默认值的为none，就是不浮动，就是常规流。

1.当一个元素浮动后，元素必定为块盒（更改display 属性为block）。

2.浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸（不轮原来是行盒，行快盒，还是块盒浮动后都是下面的特点）

块盒在常规流不设置的情况下，宽和高都是auto，宽方向的auto就是要吸收包含块的宽度，而高度根据内部。行盒和行块盒是适应内容的去改变，一旦浮动后就是下面的特点。

宽度为auto时，表示适应内容宽度
高度为auto时，与常规流一致，适应内容的高度
margin 为auto，值为0.不吸收剩余空间。
边框，内边距，百分比设置与常规流一样

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子靠上靠右排列
浮动盒子在包含块中排列时，会避开常规流盒子
常规流块盒在排列时，无视浮动盒子
行盒在排列的时，会避开浮动盒子
外边距合并不会发生常规流的地位更高，他可以无视浮动盒子，常规流块盒的地位>常规流行盒=浮动盒子 > 定位元素，这句是个人理解，为了方便记忆他的特点。所以有了常规流块盒，他遇到浮动盒子，无视浮动盒子。而浮动盒子遇到他要躲的远远的。而常规流行盒和浮动地位差不多，谁后面来，谁都要避开。而定位元素已经脱离了常规流。 上面说的浮动盒子除了在包含块中排列，会避开常规流盒子。除了这个还会避开浮动盒子，这个好像是废话。

还有一点我们需要注意的是前面说了浮动后display会变成block，什么块，块就是一整块，一整块就是不可能不可能像行盒那样蜿蜒曲折的去显示，他只会是一个方方正正的占据空间，所以，虽然设置了浮动，但是当给当前浮动盒子留的宽度不够放的时候，浮动的盒子仍然会换行排列，如果空间留的够，就会在前面元素（可能是常规流的盒子，也可能是浮动后的盒子）的排列显示。

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫匿名行盒。 文字环绕怎么做？ 1.只需要把图片浮动起来，就完成了图文环绕

  <img src="../images/01.jpeg" alt="">
    <p>新增了 更加实用的选择器 ，例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。 新增了 更好的视觉效果 ，例如:圆角、阴影、渐变等。
        新增了 丰富的背景效果 ，例如:支持多个背景图片，同时新增了若干个背景相关的属性。 新增了全新的布局方案 —— 弹性盒子。
        新增了 Web 字体，可以显示用户电脑上没有安装的字体。
        增强了颜色，例如: HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制 透明度。
        增加了 2D 和 3D 变换，例如:旋转、扭曲、缩放、位移等。
        增加 动画与过渡效果 ，让效果的变换更具流线性、平滑性。
    </p>


img {
    float: left;
    /* width: 300px; */
    margin-right: 30px;
}

p {
    font-size: 45px;
    background-color: lightgray;
}

1.首先将图片左浮动起来 2.p元素是块元素，块元素无视浮动元素，会从左上角开始排布。 3.这里还有一个关键点就是行盒会避开浮动元素，而且如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字。这里文字是放在p元素这个块盒中，所以浏览器会自动创建一个行盒，行盒又会避开浮动就会是这样的。 4.要想设置文字和图片的位置，设置图片的margin right bottom 即可。 5.对于img 如果不设置宽高，图片按实际大小展示，如果设置宽或者高，另外一个高或者宽会自动调整，如果同时设置宽和高，就要设置显示模式了。

对于浮动元素和行内元素放在同一个div里面的时候，如果是左浮动，如果行内元素和浮动元素能同时放在一行，那么左边是浮动元素，后面排行内元素，如果不能放在一行，则会根据先后顺序分两行排列。右浮动类似。

高度坍塌

高度坍塌现象：父元素的高度计算没有能按照内部子元素的浮动盒子计算高度，这样父元素（包含块）计算高度就不正确，往往计算少了，这样就形象的说这是高度坍塌。

高度坍塌的根源：常规流盒子的自动高度，在计算时，不考虑内部的浮动盒子。默认是auto，适应内容的高度。

清除浮动引起的盒子坍塌，涉及css属性：clear

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

 .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        
       <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>

::after 代表给当前元素添加最后一个子元素。