让盒子都飘起来吧，重组世界的神奇魔法之浮动

本文链接：https://blog.csdn.net/Long15537565128/article/details/104434846

标准文档流

就是一种严格按照标签的特征（块元素独占一行、行内元素可并排）从上到下，从左到右进行排列的布局方式。

块元素和行内元素

每一个元素都是一个盒子，页面的布局都是由这些元素组成。所以我们要从最基础的元素来分析。先举个例子来看看块元素和行内元素的区别：

居中的图片:

从图中可以看出块元素可以设置宽高，独占一行显示。而行内元素宽高不起作用，可以并排显示。

其中span标签之间的空白间隙是由于标准文档流的特性造成。

要让空白间隙消失：
1）让标签并排
2）给其父元素设置font-size:0;

居中的图片:

分类

常见的块元素：div、h系列、li、dt、dd
常见的行内元素：p、span、a、b、i、u、em
行内块元素：img、input(既能设置大小也能并排，但是有很大局限性。只能实现左浮动的效果）

居中的图片:

元素之间的类型也能通过display:block;和display:inline以及display:inline-block;转换（就像做变性手术一样），但是还是不能满足我们的需要。怎么才能摆脱标准流的限制？怎么移民出国？脱离标准流！

CSS中脱离标准流有三种方式：

浮动（属于半脱离文档流）
绝对定位（属于层布局中的一部分，属于完全脱离文档流）
固定定位（属于层布局中的一部分，属于完全脱离文档流）

现在就引出了今天文章的重点的重点————浮动。

浮动

是CSS中最常用的属性之一，最大的特点就是能让标签设置大小以及布局方式的多样化。

前面提到行内块能实现并排显示，我们来看看它和左浮动的区别。

居中的图片:

所以浮动相比之下还是能更好的实现布局，这也体现了浮动特性之一破坏性，下面我们来总结下浮动具有哪些特性。

破坏性

破坏了流式布局，可使块元素并排显示。

包裹性

宽度由内容来包裹（必须是块级元素，且无设置尺寸）

在这里插入图片描述

然后我们让div左浮动，加上float：left;后：

“字围”效果

是设计浮动的初衷，可以让文字包围图片。

在这里插入图片描述

贴靠性

当父元素宽度承受不住子元素的大小时就会贴靠前面的子元素，如果前面的子元素扔接受不了最终会贴靠父元素。（仍然受父元素的限制，不能浮动到父元素的外面）

在这里插入图片描述

当父元素的宽度减小到三个盒子不能并排显示时，box3会贴靠在box1上。

当box1不能贴靠时，box3会自动贴靠父元素上。

变性

会让行内元素变性成块元素，相当于做了变性手术。

在这里插入图片描述

浮动后span标签就能直接设置宽高，不用再display:block>当然这里的并排显示是浮动造成的影响，别混淆。

补充

当只有一个右浮动，无左浮动时。那么会出现错行的情况。

在这里插入图片描述

解决方法：
（1）把右浮动的标签在结构中放到前面；
（2）加一个左浮动就能让他们并排显示了。

清除浮动影响

浮动就像是子元素出国了，不在原来的位置上。那么会不会对父元素和其他子元素产生什么影响？怎么消除影响？

若子元素全部“出国”，那么此时就会造成父元素的塌陷
其中的一个子元素只会对后面的子元素造成影响（影响情况根据浮动的方向和元素类型来讨论）

清除影响

清除对父元素造成的影响：

加高法：直接给父亲元素一个固定的高度，就不需要靠子元素来撑起它的高度。但是这种方法容易造成溢出（子元素比父元素的高度高）

加overflow：hidden;:给父元素加上这个属性。这个属性的本意是将溢出的部分hidden隐藏掉。

 overflow的取值类型
           ：hidden（溢出的部分隐藏掉）
           ：scroll(溢出的内容产生滚动条)
           ：visible（默认值，溢出部分正常显示）

内墙法： 给父元素再额外添加一个子元素放到最后，这个元素不能浮动且加上clear:both;样式。类似给父元素加了一面墙放在后面，具体实现如下：
清除对兄弟间产生的影响：

图中，box2发生了左浮动，由于div.box1是块元素独占一行，所以box2只能浮动到第二行上方，而此刻box2出国了，那么box3就自动向上移动，呆在了box2的浮动的下方。由于文本不能随着移动就停留在了原地。

解决这种影响可以用clean,谁受了影响就在谁身上加上：

.xxx{clear: both;}

clear：只作用于块元素，行内元素不起作用。取值如下
：none;默认值，不清除影响
：left；清除左浮动带来的影响
：right；清除右浮动带来的影响
：both；清除左和右浮动都带来的影响

在这里插入图片描述

伪类元素：after

以上说的清除方式在真实开发中用的比较少，一般在开发都是使用伪类元素：after来清除影响。

伪类元素：after是一个不真实存在的类，默认不是块级元素

在这里插入图片描述

<!-- 清除浮动的核心，注意只作用于父类元素-->
   .clearfix::after{
            content: "";//给新增加元素的内容
            display: block;//变性成块
            clear: both;//只作用于块、清除
            overflow: hidden;
            height: 0;
        }