【重识 HTML + CSS】浮动

╰半夏微凉° 2022-10-06 10:49 138阅读 0赞

### 浮动 ###

*  CSS 属性 - float
 *   *  浮动的规则
     *  浮动的应用
     *  浮动存在的问题：高度坍塌
     *  清浮动的常见方法
     *  CSS 属性 - clear
     *  各种定位方案对比

> 博文集合：[【重识 HTML + CSS】知识点目录][HTML _ CSS]

在 CSS 中，有 3 种常用的方法对元素进行定位、布局：

*  **normal flow**：标准流、常规流、文档流
 *  **absolute positioning**：绝对定位
 *  **float**：浮动

> 绝对定位、浮动都会让元素**脱离标准流**，以达到灵活布局的效果

# CSS 属性 - float #

可以通过 float 属性让元素产生浮动效果：

*  `none`：不浮动，默认值
 *  `left`：向左浮动
 *  `right`：向右浮动

示例代码：[浮动简单认识][Link 1]

## 浮动的规则 ##

元素一旦浮动后：

*  脱离标准流
 *  朝着向左或向右方向移动，直到自己的边界紧贴着**包含块**或者**其他浮动元素**的边界为止

> **包含块** 一般指的就是父元素

**Rule1**：定位元素会层叠在浮动元素上面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

**Rule2**：浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

*  比如行内级元素、inline-block元素、块级元素的文字内容  
    ![在这里插入图片描述][20210615192618494.png]
 *  利用此特性，可以轻松实现文字环绕功能：[浮动-文字环绕练习][-]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

**Rule3**：行内级元素、inline-block 元素浮动后，**其顶部将与所在行的顶部对齐**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]  
实现代码：[float-rule\_01-其他][float-rule_01-]

**Rule4**：如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]

> 带圆圈的数字，标记着浮动元素浮动之前的位置

**Rule5**：浮动元素之间不能层叠

*  如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
 *  如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

**Rule6**：浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]  
示例代码：[float-rule\_01][float-rule_01]、[float-rule\_02][float-rule_02]、[float-rule\_02-其他][float-rule_02-]、[float-rule\_03][float-rule_03]

## 浮动的应用 ##

浮动常用的场景：

*  解决行内级元素、inline-block 元素的水平间隙问题  
    ![在这里插入图片描述][20210622230946360.png]
 *  布局  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]

## 浮动存在的问题：高度坍塌 ##

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

父元素计算总高度时，就不会计算浮动子元素的高度，导致了**高度坍塌**的问题

解决父元素高度坍塌问题的过程，一般叫做 **清浮动（清理浮动、清除浮动）**

*  清浮动的目的：让父元素计算总高度的时候，把浮动子元素的高度算进去

代码：[浮动的问题][Link 2]

## 清浮动的常见方法 ##

**给父元素设置固定高度**

*  扩展性不好（不推荐）
 *  代码：[清浮动-01][-01]

**让父元素浮动**

*  可能导致页面中所有元素都浮动
 *  父元素脱离了标准流
 *  改变了元素的盒子特性（不推荐）
 *  代码：[清浮动-02][-02]

**让父元素成为绝对定位元素（position 设置为 absolute 或 fixed）**

*  父元素脱离了标准流
 *  改变了元素的盒子特性（不推荐）
 *  代码：[清浮动-03][-03]

**给父元素设置 display 为 inline-block、inline-table、table、table-cell、table-caption**

*  改变了父元素的盒子特性（不推荐）
 *  代码：[清浮动-04][-04]

**给父元素设置 overflow 为 visible 以外的值（比如 hidden、auto、scroll）**

*  改变了父元素对内容溢出的默认行为（不推荐）
 *  代码：[清浮动-05][-05]

**在父元素最后增加一个空的块级子元素，并且让它设置** `clear: both`

*  会增加很多无意义的空标签，维护麻烦
 *  违反了结构与样式分离的原则（不推荐）
 *  代码：[清浮动-06][-06]

**在父元素最后增加一个 br 标签**：`<br clear="all">`

*  会增加很多无意义的空标签，维护麻烦
 *  违反了结构与样式分离的原则（不推荐）
 *  代码：[清浮动-07][-07]

> 以上方法都不推荐，简单了解即可

给父元素增加 `::after` 伪元素

*  纯 CSS 样式解决，结构与样式分离（**推荐**）

.clear-fix::after { 
    	content: "";
    	display: block;
    	clear: both;
    	height: 0; /* 兼容旧浏览器 */
    	visibility: hidden; /* 兼容旧浏览器 */
    }
    
    .clear-fix { 
    	*zoom: 1; /* 兼容IE6~7浏览器 */
    }

示例代码：[清浮动-推荐解决方案][- 1]

## CSS 属性 - clear ##

clear 的常用取值：

*  `left`：要求元素的顶部低于之前生成的所有左浮动元素的底部
 *  `right`：要求元素的顶部低于之前生成的所有右浮动元素的底部
 *  `both`：要求元素的顶部低于之前生成的所有浮动元素的底部
 *  `none`：默认值，无特殊要求

> claer 一般就只用在**非浮动元素**上，可以让非浮动元素与浮动元素不层叠

示例代码：[clear][]

## 各种定位方案对比 ##

![在这里插入图片描述][20210623000008208.png]

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[Link 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/01-float%E7%AE%80%E5%8D%95%E8%AE%A4%E8%AF%86.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221005/630e8c13efa3451395c173f3ee89ce54.png
[20210615192618494.png]: /images/20221005/22dbadcfdd4042e9bcebb052ad3df45c.png
[-]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/02-float-rule_01-%E7%BB%83%E4%B9%A0.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/7fccd7d8698d4aeb96e3363fd5e4d2b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/9488a93232c6452382bb2bddeb0484c9.png
[float-rule_01-]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/02-float-rule_01-%E5%85%B6%E4%BB%96.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/b33b654ed91e40a3b34e11779681cdcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/5acbf0e343fe4a1984018f675be1a0ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/278312280b6e4cc88f4bf719bb6c86aa.png
[float-rule_01]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/02-float-rule_01.html
[float-rule_02]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/02-float-rule_02.html
[float-rule_02-]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/02-float-rule_02-%E5%85%B6%E4%BB%96.html
[float-rule_03]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/02-float-rule_03.html
[20210622230946360.png]: /images/20221005/1e8d70ffa5d04c90a4b3eb836c66f715.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/dc80ada6ea89483f9fe57ea380a0176e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20221005/cd254dafecb5453c933d5a1457855d88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20221005/5206c2bdf1f54bda8a75a560dc0bab4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20221005/1b73e03adb974159addadabf565f1ea4.png
[Link 2]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/06-%E6%B5%AE%E5%8A%A8%E7%9A%84%E9%97%AE%E9%A2%98.html
[-01]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_01.html
[-02]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_02.html
[-03]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_03.html
[-04]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_04.html
[-05]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_05.html
[-06]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_06.html
[-07]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_07.html
[- 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/07-%E6%B8%85%E6%B5%AE%E5%8A%A8_08.html
[clear]: https://gitee.com/szluyu99/html_css_note/blob/master/day10/01-%E6%B5%AE%E5%8A%A8/08-clear.html
[20210623000008208.png]: /images/20221005/b16e53ff823b48beb098a96f21a6f6c5.png