【CSS】浮动和清除 float & clear

浮动和清除

浮动

• 浮动的属性与值

{
    attribute: float
    value: left | right | none | inherit
    initValueL: none
}

• 浮动元素要点

浏览器会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。这种影响源自于这样一个事实：一个元素浮动时，其他内容会“环绕”该元素。
如下图红色的浮动元素被黑色的内容所包含。

image.png

浮动元素周围的外边距不会合并。

• 包含块的概念

浮动元素的包含块是其最近的块级祖先元素。
因此，在以下标记中，浮动元素 img 的包含块就是包含该浮动元素的段落元素 p元素

<h1>Test</h1>
<p>
    this is a paragraph.
    <img src="test.gif" style="float: right;">
    this is a paragraph.
</p>

• 摆放浮动元素的规则

1.浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界

2.浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，这条规则可以防止浮动元素彼此“覆盖”。
.......

这里大概有十条左右的规则，根据我的简单理解就是浮动元素不能越过包含块的边界，并且浮动元素之间不能重叠，按照顺序，在前的浮动元素占据优先的位置，之后的浮动元素根据已经排列好的浮动元素的位置再定位自己的位置。

如下图，paragraph2浮动元素虽然也是 float: right; 但是paragraph1浮动元素在前，所以paragraph2的右边界是在paragraph1的左边界右侧。
paragraph3的上边界是在paragraph2的下边界之下，虽然还有空间，但paragraph3并没有与paragraph1相接。

image.png

• 负外边距

负外边距可能导致浮动元素移到其父元素的外面。但这是被允许的。

• 浮动元素与其他元素重叠时的显示顺序

行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。
如下图， 黄色的行内元素与浮动元素重合时，行内元素的边框、背景和内容覆盖了浮动元素。

image.png

块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。
如下图， 黄色的块元素与浮动元素重合时，块元素的边框、背景在浮动元素之下
内容在浮动元素之上。

image.png

清除

可以使用清除属性来清除浮动行为

{
    attribute: clear
    value: left | right | both | none | inherit
    initValueL: none
}