文章目录

• 浮动
• • • 1.浮动属性
    • 2.浮动详解
• 清除浮动
• • • 1.清除浮动属性
• 浮动形状
• • • 1.定义形状
    • 2.使用图片定义浮动形状
    • 3.使用透明图片定义浮动形状
    • 4.给形状添加外边距

浮动

1.浮动属性

float

• 取值： left | right | none
• 初始值：none
• 作用于：所有元素

在某种程度上，浮动的元素脱离了常规的文档流，但是仍然会对布局有影响。CSS浮动元素的特殊之处是，浮动元素基本处于一个单独的平面之上，但是仍然会对其余内容有影响。这是因为元素浮动以后，其他内容将会围绕它流动。如果浮动元素是非置换元素，要为元素设定宽度。否则，元素的宽度会趋近于零。

ps.浮动元素四周的外边距不折叠

根本不浮动

除了left和right外，float还有一个属性————none，即根本不浮动。这时可能就有人要说了，默认值就是none，那设置这个属性有什么用呢，那这就得提到样式覆盖的特性了。假设引入了一个外部样式，设置了* { float: left; };那我们为元素设置float:none属性就可以让元素免除浮动。

2.浮动详解

浮动元素的容纳块是最近的块级祖辈元素。此外，任何类型的元素，浮动之后得到的都是块级框。在布局中，浮动元素就像div元素一样（这与声明display：block的效果是一样的）。浮动元素的位置由一系列规则约束：

（1）浮动元素的左、右边界不能超过容纳块的左右边界。

（2）如果在文档源码中处于前面的元素向左浮动，那后面元素的左边界必定在前一个元素右边界的右侧，除非后一个元素的顶边在前一个元素的底边以下。

（3）左浮动元素的右边界不能在右浮动元素的左外边界的右侧。右浮动元素的左外边界不能在左浮动元素的右外边界左侧。

（4）浮动元素的顶边不能高于父元素内顶边高。如果浮动元素位于两个折叠的外边距之间，在两个之间放置它的位置时，将视其有个块级父元素。

（5）浮动元素的顶边不能比前方任何一个浮动元素或块级元素的顶边高。

（6）浮动元素的顶边不能高于文档源码中出现在浮动元素之前的元素生成的框体所在的行框的顶边。

（7）左浮动元素的左边如果还有一个向左浮动的元素，那么它的右边界不能在容纳块右边界的右侧。

（8）浮动元素必须放在尽可能高的位置上。

（9）左浮动元素必须尽量靠左移动，右浮动元素必须尽量向右移动。位置越高，向左或向右的距离越远。

清除浮动

有时我们并不希望元素向浮动元素的方向流动，我们希望浮动元素后的第一个元素可出现在浮动元素的下方，而不是接着浮动元素的流行排列。这时，我们就可以用到清除浮动。

1.清除浮动属性

clear

取值：left | right | both | none

初始值：none

适用于：块级元素

如果不想让一个元素出现在左浮动元素的后面，可以声明属性clear: left,这样元素就不会紧挨着左浮动元素的右侧了。但是这样有一个问题，就是浮动元素会出现在元素的右边，这时我们可以声明clear: both，这样元素的两边就都不会出现浮动元素了。

根本不浮动

和float:none一样。

浮动形状

1.定义形状

shape-outside

适用于：浮动元素

2.使用图片定义浮动形状

当该属性的值为图片URL时，如果图片有透明部分，那么内容将按照透明部分填充。但是不是完全填充透明部分，而是填充与内容直接接触那一边的透明部分。

3.使用透明图片定义浮动形状

shape-image-threshold

取值：

初始值：0.0

适用于：浮动元素

这个属性用于指定透明度为多少时，运行内容流入。

4.给形状添加外边距

shape-margin

取值： 长度单位 | 百分比

初始值：0

适用于：浮动元素