CSS-什么是标准文档流，元素的浮动，浮动元素的特点

Bertha 。 2023-06-02 09:30 8阅读 0赞

在以前浮动多来控制图片，实现文字环绕图片的效果（字围效果）；现在主要利用浮动的特性（脱离标准文档流）来实现页面的布局

#### 标准文档流 ####

*  元素在排版布局过程中会默认自动从上往下，从左往右的流式排列；最终页面自上而下分成一行行，并在每行中从左至右的顺序排放元素
 *  标准文档流由块级元素和内联元素两类元素组成，在标准文档流中块级元素独自占一行，从上向下的顺序进行排列；行内元素按从左往右的顺序进行排列，遇到父级元素的边沿会自动换行排列

#### 浮动的特点 ####

*  浮动会让元素脱离标准文档流的控制
 *  浮动的元素会产生字围的效果
 *  浮动的元素会以最近的父级元素对齐，如果父级元素设置的有内边距浮动元素不会超出内边距的范围
 *  浮动可以让多个块级元素在一行显示，元素间互相贴靠(往一个方向浮动时)
 *  浮动的元素会具有行内块元素的特性，元素的大小取决于设置的大小或者内容多少（未给浮动元素设置宽高时宽高由内容决定）

使用浮动在开始一定要遵循一个原则：同级子元素中永远不是一个元素单独浮动，要浮动，大家都浮动

浮动只会影响当前的或者是后面的标准流盒子，不会影响浮动元素前面的标准流

CSS 通过 `float` 样式属性实现元素的浮动，其对应的属性值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>元素向左浮动</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>元素向右浮动</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>不浮动</td> 
  </tr> 
 </tbody> 
</table>

#### 浮动元素的字围效果 ####

不设置浮动时：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
设置浮动之后：

.box { 
      width: 200px;
      height: 200px;
      float: left;
      background-color: blue;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

#### 浮动的元素会脱离标准文档流，不再占有原来的空间（普通元素会去填充原来的空间），层级会高于普通元素 ####

示例 ：

不浮动时，块级元素独占一行

.section { 
       width: 200px;
       height: 200px;
       background-color: red;
     }
    
     .article { 
       width: 300px;
       height: 220px;
       background-color: blue;
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]  
设置浮动之后：

.section { 
      width: 200px;
      height: 200px;
      /* 设置了浮动 */
      float: left;
      background-color: red;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]

#### 浮动的元素并排显示，元素之间相互贴靠 ####

.box1, .box2, .box3 { 
      width: 200px;
      height: 200px;
      /* 设置了浮动 */
      float: left;
      background-color: red;
    }
    .box2 { 
      background-color: green;
    }
    .box3 { 
      background-color: blue;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230601/c1f6376a46d64e2293c23f7cba916fc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/28965310311e476182659e947e105c05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: /images/20230601/7da8477fb05e46f5baa55239be39c7dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: /images/20230601/29f76fc929f84333936a5ee04ec0abd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]: /images/20230601/f77e68621a24460abb46bac693bab619.png