css中的浮动属性

前言

之前自己较少使用float属性，在月度他人的代码，或者是在使用的时候，总是抱着尝试的方式，并借助于浏览器开发工具，一遍又一遍的尝试，对每次调整的属性值感觉信心不够充足，
而且，还经常的出现，调整了一个属性，导致另外一个属性也跟随者变化，或者出现自己意想不到的效果。
我想要摆脱这样子的困境，我需要从根本上来学习关于float以及float的使用完整规则

浮动

浮动的元素将告诉其父元素容纳块，请将我浮动到您的左侧或者右侧！！！
浮动的元素脱离了常规的文档流，不过对布局仍然有影响，元素设置为浮动后，其他内容将围绕它流动。
⚠️ 以下有两种情况需要特别注意的：

浮动元素四周的外边距并不会折叠；

非置换元素若设置为浮动，必须🉐️设置它的宽度，否则该元素将趋近与0⃣️。

属性	取值
取值	left/right/none
初始值	none
适用于	所有元素
继承性	否

基础概念

容纳块：
在深入了解浮动之前，必须要建立容纳块的思维，在之前的学习，我们可以知道，所有的容纳块，其实就是某个子元素所在的最近的块级祖先元素。

使用规则

浮动元素的左(或者右)外边界不能超过容纳块的内边界，也就是只能到达容纳块的padding的位置
如果同一个容纳块中有往同一个方向上(同时向左或者向右)浮动的元素，那么后出现的浮动元素，将会在浮动元素的另外一侧挨着摆放，除非内容不够才自动换行；
左浮动元素的右外边界不能在右浮动元素的左外边界的右侧；
浮动元素的顶边不能比父元素的内顶边高(与👆第一点类似);
浮动元素的顶边不能比前方任何一个浮动元素或者块级元素的顶边高(与第4点类似)；
浮动元素的顶边不能高于文档中出现在浮动元素之前的元素生成的框体所在行框的顶边；
浮动元素必须放在尽可能高的位置上，正常浮动元素应该放在同一行标签所定义的行框上，只要有足够的空间，它就会向上跑；
左浮动元素必须尽量向左移动，右浮动元素必须尽量向右移动，位置越高，向左/向右移动的距离越远；

超过容纳块高度的浮动元素

🤔 上述👆的规则只提及到容纳块的左右以及顶部，那么加入浮动元素的高度超过了容纳块的高度，会是怎样的情况？？

✨ 这里浮动元素超过了容纳块的高度，导致其他元素也挨着它来摆放，而且容纳块的高度，并没有因为浮动元素的高度而被撑开，🤔这里如果想要使容纳块的高度也跟随着
浮动子元素的高度而一起撑开的话，可以是将容纳块也设置为浮动属性的即可，如下图所示：

✨ 上面的这个例子的第一种情况中，还隐藏着一个知识点：当浮动元素与内容重叠时，行内元素与块级元素的不同表现形式：

不同元素与浮动元素重叠	表现形式
行内元素	其边框、背景和内容都在浮动元素”的上方”渲染
块级元素	其边框、背景都在浮动元素”背后”渲染，而内容在浮动元素之上渲染

效果标注如下：

负外边距的对浮动元素的影响

浮动元素的负外边距将导致该浮动元素移到父元素的外面，这个好像与👆的规则冲突，实则不冲突

清除浮动(clear)

有时候，我们不希望浮动元素从一个区域探出，进入另外一个区域，也就是不想因为容纳块中某个元素设置成了浮动，导致其他元素挨着该浮动元素来排，
此时，要禁止其他元素出现在浮动元素的旁边，可以使用clear属性，让目标元素的左边/右边/两边不与浮动的元素共存在同一行

clear属性	描述
取值	left/right/both/none
默认值	none
适用于	块级元素
继承性	否

浮动形状

有时，我们希望浮动元素周围按照一定的形状来流动，可以使用shape-outside属性来设定

share-outside属性	描述
取值	none/ basic-shape + shape-box / image
初始值	none
继承性	否

属性使用一览

image，一般的，我们采用png格式的图片，且图片中包含有透明区域的话，当设置为该属性时，其他流动的元素，将会”渗透”至透明部分，就好像是绕着图片来摆放元素一样
basic-shape与shape-box一般是配合一起来使用的

basic-shape定义的元素的浮动形状，这里定义的浮动形状，其外框正常情况不超出浮动元素框，如果超过的话，超过部分将被直接裁剪掉

basic-shape取值	描述
inset()	内凹形状
circle()	圆形
ellipse()	椭圆形
polygon()	多边形

✨ 这里主要share关于多边形的使用，多边形形状由一系列的逗号分割的(x,y)坐标定义，值可以用长度或者百分比来表示，以元素左上角为坐标原点，向右边x以及向下y延伸，
由多个不同的坐标点集合成为一个闭合的区域，这个形成的闭合区域，将作为浮动的形状！！

shape-box取值	描述
margin-box	这个是定义的默认值定义因浮动导致的其他正常元素的向，从浮动元素的外边距开始流动
border-box	从浮动元素的边框开始流动
padding-box	从浮动元素的内边距开始流动
content-box	从浮动元素的内容开始流动