结合三维空间坐标系形象理解CSS中的浮动float与浮动流

一、理解浮动流概念

在html文件中，所有布局默认排版于标准文档流中。
但当对某个元素进行浮动时，元素将半脱离文档流，存在于浮动流中。
浮动一般用于：水平布局或者是文字图片环绕。

*之所以说半脱离，是因为元素浮动是相对于元素原本在标准文档流内的位置进行浮动，并且浮动流的宽度依然受到标准文档流内的父级的制约，浮动流元素虽然是水平排布，但是如果父级宽度不够时，浮动元素将会换行继续水平排布。

按照三维空间解析文档流与浮动流的关系：
文档流与浮动流的三维可视图解析

二、浮动排布规则以及浮动对于标准文档流排布的影响

我们首先需要了解标准文档流的元素两种默认排布方式：水平排布（行内元素和行内块元素）和垂直排布（块级元素），元素会默认排布在文档流末尾。其定位都是按照他的上一个兄弟元素来判定文档流末尾进行插入，我们结合上面的坐标系图理解：

1、在标准文档流中的排布方式和元素类型：

对于块级元素，他会锁定离他最近的兄弟元素的y轴坐标作为文档流末尾进行定位，在垂直y轴方向垂直插入。
对于行内元素和行内块元素，他会锁定离他最近的兄弟元素的x轴坐标作为文档流末尾进行定位，在水平x轴方向水平插入。（但是如果父元素的宽度不够，水平方向的剩余空间无法容该元素的插入，他将排布到兄弟元素下一行的最左边）

2、在浮动流中的排布方式和元素类型：

在标准文档流中，块级元素独占一行；而当块级元素浮动起来之后将被转化为类似行内块的元素；因为浮动流的排布方向是水平方向的。因此元素浮动之后，在浮动流里都被转化为类行内块，浮动流元素水平排布且可以设置宽高。
*浮动元素只能水平排布，且只能设置左对齐或者右对齐（float:left/right；不能居中排布，也不能设置margin: 0 auto来居中排布）

浮动的特点：

（1)只能向左/向右水平排布，不能居中排布（margin：0 auto无效）
（2）先浮动的排布在前面；后浮动的依次按照方向（left/right）排布在后

（3）浮动元素贴靠现象：
<1>、父元素宽度足够时，元素全部在一行水平排布；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 500px;
            height: 300px;
            background: #575757;
        }
        .div1>div{
            width: 100px;
            height: 100px;
            background: #d7d7d7;
            border: 1px solid #ff7272;
            float: left;
        }
    </style>
</head>
<body>
<section>
    <div class="div1">
        <div>浮动1</div>
        <div>浮动2</div>
        <div>浮动3</div>
    </div>
</section>
</body>
</html>

效果图：
在这里插入图片描述
<2>、父元素宽度不够时，最后一个元素依次向前面的兄弟元素贴靠，直到能够有容纳他的空间；如果都无法容纳则只能靠到父元素的最左边或者最右边：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 500px;
            height: 300px;
            background: #575757;
        }
        .div1_1{
            width: 100px;
            height: 290px;
            background: #d7d7d7;
            border: 1px solid #ff7272;
            float: left;
        }
        .div1_2{
            width: 200px;
            height: 150px;
            background: #d7d7d7;
            border: 1px solid #ff7272;
            float: left;
        }
        .div1_3{
            width: 300px;
            height: 100px;
            background: #d7d7d7;
            border: 1px solid #ff7272;
            float: left;
        }
    </style>
</head>
<body>
<section>
    <div class="div1">
        <div class="div1_1">浮动1</div>
        <div class="div1_2">浮动2</div>
        <div class="div1_3">浮动3</div>
    </div>
</section>
</body>
</html>

效果图：
在这里插入图片描述
（4）浮动可以形成图文环绕效果

3、浮动流对标准文档流的影响：

当文档流中有元素浮动起来之后：
在这里插入图片描述
因为文档流中下一个块级元素的位置将自动定位到文档流末尾处。当div2浮动起来之后，div2脱离了文档流，之后的文档流实际将定位在div1尾部，所以从浏览器渲染的角度来看，当插入div3之后的内容将会被div2遮挡一部分。

因此，浮动会对下面的元素造成影响。
例：

<div style="width: 200px;height: 300px;background: #ffffff;border:1px solid black;
float: left">
我浮起来了
</div>
<div style="width: 300px;height: 400px;background: #d7d7d7"></div>

效果：
在这里插入图片描述
浮动还会对标准文档流造成的另一个影响：如果浮动元素的父级没有设置高度，子元素浮动之后父元素将发生：浮动塌陷（父元素“失去”高度）

综上所述：
浮动流对标准文档流的影响有两点：
1、对浮动元素下面的元素造成影响，可能会遮挡下面的元素。
2、如果父级没有设置高度，子元素浮动之后，处于标准文档流内的父元素将会造成浮动塌陷。

三、清除浮动带来的不良影响

1、清除浮动对下面元素的影响 clear:both

相当于使浮动元素后面的兄弟元素不再只根据文档流内的空间定位，而使其定位视线与浏览器渲染的视线角度相同，如图：
在这里插入图片描述
根据这个视线在三维空间中找到整个空间的尾部作为定位，清除浮动对其后元素的影响。

2、清除浮动塌陷的影响

解决方法：
1、给兄弟元素清除浮动，
2、给父元素加一个高度，
3、给父元素加一个元素：overflow：hidden(自动找寻父元素边界)
子元素浮动不会对外界元素造成直接影响，但是子元素会对父元素造成影响，父元素会对外界元素造成影响（间接）

——————————————————————————————————————
以上仅为个人学习理解，如有错误，还请评论指正

本文链接：https://blog.csdn.net/weixin_44356180/article/details/100898904

智能推荐

WebGL学习第三集 - 三维空间的观察

1.认识相机在Threejs中相机的表示是THREE.Camera，它是相机的抽象基类，其子类有两种相机，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。类图如下所示：正投影相机有时候也叫正交投影摄像机，下图显示了正交摄像机投影和透视投影之间的差别。 2.两者区别正投影和透视投影的区别是：透视投影有一个基本点，就是...

基于opencv绘制图片的三维空间显示图（python）

python 3.6 + opencv 输入图片转为灰度图，使用numpy将其转化为数字矩阵用matplot将矩阵在三维空间中绘制出来输入图片：输出效果：俯视仰视侧面看代码如下：源码地址：GitHub CSDN下载地址：源码+图片...

Java运行原理

1.Java运行原理我们可通过文本编辑板生成Java源代码（.java）经过dos窗口由Java编译器（javac.exe）生成字节码文件（.class），字节码可由Java虚拟机转化为机器码供计算机读取处理。由于Java可以生成字节码可供虚拟机转译所以可跨平台运行。运行过程如下：所以相对于C语言还需要转化为exe文件才能运行的权限，Java具有跨平台...

Python由放弃到入门，基础篇七（类）下

类的实例化有感于现在python教程多如牛毛，且大多高不可攀，多次拜读而不得其门道，遂由入门到放弃。偶有机缘，得一不错教程，得以入门，现博客分享，想要获取完整教程，ff17328081445。通过对比可以看到，实例化后再使用的格式，①是空着的，意思是这里不再需要@classmethod的声明，并且在第②处，把cls替换成了self。同时，实例化后再使用的格式，需要先赋值然后再调用（第③处）： ...

pytorch CNN手写字体识别

数据整体训练一次，对于accuracy都是0的问题，由于刚开始学，有些代码的细节我也没看懂，不过整体结果是对的，可能是由于pytorch版本的更新，导致accuracy的计算方式有所改变内容转载自：https://www.bilibili.com/video/av15997678/?p=19...