CSS float 浮动属性

淩亂°似流年 2021-07-04 12:31 549阅读 0赞

本篇主要介绍`float`属性：定义元素朝哪个方向浮动。

## 目录 ##

1.  页面布局方式：介绍文档流、浮动层以及`float`属性。
2.  `float:left` ：介绍float为 left 时的布局方式。
3.  `float:right` ：介绍float为 right 时的布局方式。
4.  相邻元素含有`float`属性：介绍相邻元素含有`float`属性时的布局方式。

## 1. 页面布局方式 ##

页面布局方式，主要包含：文档流、浮动层、float属性。

### 1.1 文档流 ###

HTML页面的标准文档流(默认布局)是：**从上到下，从左到右，遇块(块级元素)换行**。

### 1.2 浮动层 ###

浮动层：给元素的`float`属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为`body`文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

### 1.3 `float` 属性介绍 ###

① `left` ：元素向左浮动。  
② `right` ：元素向右浮动。  
③ `none` ：默认值。  
④ `inherit` ：从父元素继承float属性。

### 1.4 示例 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>2.3-float属性</title>
        <style type="text/css"> #a { background-color:Red; height:50px; width:100px; } #b { background-color:Yellow; height:50px; width:200px; } #c { background-color:Blue; height:50px; width:300px; } #d { background-color:Gray; height:50px; width:400px; } </style>
    </head>
    <body>
    <div id=a >div-a</div>
    <div id=b>div-b</div>
    <div id=c>div-c</div>
    <input type="text" value="input1" />
    <input type="text" value="input2" />
    <input type="text" value="input3 " />
    <div id=d>div-d</div>
    <input type="text" value="input4 " />
    </body>
    </html>

## 2. `float:left` ##

说明：元素向左浮动。

### 2.1 代码变更 ###

`input2` 添加：`float:left`

`div-b` 添加：`float:left`

`div-d` 添加：`float:left`

### 2.2 变更后视图 ###

① 浏览器的宽度“不够长”时  
![在这里插入图片描述][20190903093755979.png]  
② 浏览器的宽度"够长"时  
![在这里插入图片描述][20190903093814232.png]

### 2.3 结论 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">当前元素分类(<code>float:left</code>)</th> 
   <th align="left">下一个紧邻元素分类(不含<code>float</code>)</th> 
   <th align="left">结论</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">块级元素(a)</td> 
   <td align="left">块级元素(b)</td> 
   <td align="left">b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left">内联元素(b)</td> 
   <td align="left">b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。</td> 
  </tr> 
  <tr> 
   <td align="left">内联元素(a)</td> 
   <td align="left">块级元素(b)</td> 
   <td align="left">b不会跟随a的移动。</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left">内联元素(b)</td> 
   <td align="left">b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。</td> 
  </tr> 
 </tbody> 
</table>

## 3. `float:right` ##

说明：元素向右浮动。

### 3.1 代码变更 ###

`input2`元素：添加 `float:right`  
`div-b` 添加：`float:right`  
`div-d` 添加：`float:right`

### 3.2 变更后视图 ###

① 浏览器的宽度“不够长”时  
![在这里插入图片描述][20190903094500585.png]  
② 浏览器的宽度"够长"时  
![在这里插入图片描述][2019090309451641.png]

### 3.3 结论 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">当前元素分类(<code>float:right</code>)</th> 
   <th align="left">下一个紧邻元素分类(不包含<code>float</code>)</th> 
   <th align="left">结论</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">块级元素(a)</td> 
   <td align="left">块级元素(b)</td> 
   <td align="left">b会填充a遗留下来的空间，若a会和b发生重叠(父容器宽度减少)，a的图层在上面。</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left">内联元素(b)</td> 
   <td align="left">b会填充a遗留下来的空间。</td> 
  </tr> 
  <tr> 
   <td align="left">内联元素(a)</td> 
   <td align="left">块级元素(b)</td> 
   <td align="left">b不会跟随a的移动。</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left">内联元素(b)</td> 
   <td align="left">b会填充a遗留下来的空间。</td> 
  </tr> 
 </tbody> 
</table>

## 4. 相邻元素含有`float`属性 ##

因内联元素的特性，最好别把内联元素与块级元素相邻使用`float`属性。

**下面都以块级元素为例：**

默认视图：  
![在这里插入图片描述][2019090309480390.png]

### 4.1 `float:left` ###

给这三个`div`都添加 `float:left`

**4.1.1 视图**  
①浏览器的宽度"足够长"  
![在这里插入图片描述][20190903095223439.png]  
②浏览器的宽度"不够长"  
![在这里插入图片描述][2019090309523214.png]  
**4.1.2 结论**  
Ⅰ 相邻的浮动元素，left属性最前面的元素，排在最左面。  
Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

### 4.2 `float:right` ###

给这三个`div`都添加 `float:right`

**4.2.1 视图**  
①浏览器的宽度"足够长"  
![在这里插入图片描述][20190903095309419.png]  
②浏览器的宽度"不够长"  
![在这里插入图片描述][20190903095320298.png]  
**4.2.2 结论**  
Ⅰ 相邻的浮动元素，`right`属性最前面的元素，排在最右面。

Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

### 4.3 `height`高度不等的块级元素 ###

把`div-a`的`height`值设为大于`div-b`，三个`div`都添加 `float:left`后：

**4.3.1 视图**  
①浏览器的宽度"足够长"  
![在这里插入图片描述][20190903095355673.png]  
②浏览器宽度缩小时  
![在这里插入图片描述][2019090309540343.png]  
③浏览器宽度进一步缩小时  
![在这里插入图片描述][20190903095411371.png]  
**4.3.2 结论**  
Ⅰ `height`不相等的`div`浮动元素排序时，照拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

**4.3.3 解决浏览器宽度缩小变形**  
把添加`float`的属性的`div`元素嵌入在一个`div`中，并给此`div`添加`width`和`height`属性。浏览器宽度缩小时，也不会发生变形。

可参照 [`CSS HTML`元素布局及`Display`属性介绍][CSS HTML_Display]  
![在这里插入图片描述][20190903095440517.png]

[20190903093755979.png]: /images/20210704/2a4b081b80484d8d9fd4c0e9a352a31e.png
[20190903093814232.png]: /images/20210704/0c442db3a5d7499f8db3fc391d353bd2.png
[20190903094500585.png]: /images/20210704/03a0ea3983344f9297840c7df149c4e7.png
[2019090309451641.png]: /images/20210704/b7badd53681f4c44be8266296e5b5cb0.png
[2019090309480390.png]: /images/20210704/926a344abca24e76a6abf50609528c29.png
[20190903095223439.png]: /images/20210704/117ebb8842d649e98411f20300e5b8a4.png
[2019090309523214.png]: /images/20210704/96f013e8f88c4398b82e562d3311d8c6.png
[20190903095309419.png]: /images/20210704/44bfc5c89c7745f996b5eda189c75806.png
[20190903095320298.png]: /images/20210704/1b8de82b2d0045848af358cef277dfbe.png
[20190903095355673.png]: /images/20210704/ab5826508e3641979929e34191781eb0.png
[2019090309540343.png]: /images/20210704/871531481fbe4743a4fa77b6d87f6b56.png
[20190903095411371.png]: /images/20210704/f2e1f3545fa0434e91723fff6f0707aa.png
[CSS HTML_Display]: http://www.cnblogs.com/polk6/p/3185692.html
[20190903095440517.png]: /images/20210704/774a6fc531de464294504c44b1a029e4.png