1.Float浮动和清除浮动

Posted 2020-10-27 daydayupyxq

1.Float的介绍

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄(塌陷的产生)。 
注：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.《CSS Mastery》一书中讲的特别有趣和好理解，我简单的用几个demo介绍一下。

a.不浮动的时候
<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; ">
        </div>
        <div style="height: 100px; width: 100px;  ">
        </div>
        <div style="height: 100px; width: 100px; ">
        </div>
 </div>   

---

b.当red部分右浮动：

<div style="border: solid 5px #09F; width:300px;">
            父元素内容
            <div style="height: 100px; width: 100px;  float:right;">
            </div>
            <div style="height: 100px; width: 100px; ">
            </div>
            <div style="height: 100px; width: 100px; ">
</div>

---

c.当red部分左浮动：

<div style="border: solid 5px #09F; width:300px;">
        父元素内容
        <div style="height: 100px; width: 100px;  float:left;"></div>
        <div style="height: 100px; width: 100px; "></div>
       <div style="height: 100px; width: 100px; "></div>
</div>

此时的green和yellow部分和”父元素内容”是在普通文档流中，red部分覆盖了文档流中的green部分。

---

d.所有的向左浮动,父元素的高度为0

<div style="border: solid 5px #09F; width:300px;">
            <div style="height: 100px; width: 100px;  float:left;">
            </div>
            <div style="height: 100px; width: 100px;  float:left;">
            </div>
            <div style="height: 100px; width: 100px;  float:left;">
</div>

当所有的元素都向左或者是向右浮动（此例子效果相同如上图），父元素未浮动，此时父元素就会出现塌陷，即父元素的高度为0px。

---

如果父包含块太窄而无法容纳水平排列的多个浮动元素时,那么其它浮动块儿向下移动,,直至找到有足够的宽度容纳浮动块,如果浮动元素的高度不同,那么在向下移动的时候可能会被卡住。

e.当父元素的宽度不足以容纳所有的浮动元素时，浮动块就会下移，如下图：

<div style="border: solid 5px #09F; width:240px;">
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
</div>

---

f.当高度不等时会出现类似“卡住了”现象，如下图

<div style="border: solid 5px #09F; width:240px;">
    <div style="height: 110px; width: 100px;   float:left;"> </div>
    <div style="height: 100px; width: 100px;   float:left;"> </div>
    <div style="height: 80px; width: 100px;   float:left;"> </div>
</div>