web前端8--浮动

1、标准流

在CSS中，标准流(也称为文档流或普通流)具有以下主要特点：

1、元素的排列方式：块级元素会从上到下依次垂直排列，每个块级元素独占一行。内联元素会从左到右水平排列，在一行内显示，直到该行排满，再换行到下一行继续排列。

2、宽度和高度：块级元素默认会自动填满其父元素的宽度，高度由内容撑开。内联元素的宽度和高度由其内容决定。

3、位置：元素在标准流中的位置相对固定，遵循特定的规则进行布局。

2、浮动

浮动的元素会从正常的文档流中脱离，不再占据标准流中的位置。

直至遇到父元素内容区的边界或其他浮动元素。常用于创建水平布局、图文混排的页面布局场景。

| `float:left`  | 元素向左浮动，直至遇到父元素内容区的边界或其他浮动元素。 |
| `float:right` | 元素向右浮动，直至遇到父元素内容区的边界或其他浮动元素。 |

```css
 .one{
            float: right;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .two{
            /* float: right; */
            width: 100px;
            height: 100px;
            background-color: rgb(11, 213, 18);
        }
```

- 如果水平方向空间不够显示浮动元素 浮动元素会向下移动 
知道有充足的空间

- 浮动元素无法遮挡文本显示 会围绕在浮动元素的周围

- 浮动元素表现为行内块 可以给宽高

- 浮动只能影响下面的 不能影响上面的

```css
   span{
            float: left;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
```

3、浮动和行内块的区别

都能同一行排列 为什么浮动好 ？

1. 基线处理比较麻烦
2. 一个在左 一个在右
3. 空白解析

4、浮动引起的父元素高度塌陷

包含浮动元素的容器可能会因为浮动元素的脱离文档流而导致高度塌陷。

好处： 子盒子撑开父盒子高度
            不管我儿子多大能兼容

！！！解决方法：
1、 如果子元素浮动 给父元素高度 
       给父元素的末尾添加空的块元素 设置clear:both;清除浮动 
2、为父元素设置overflow:hidden;

5、应用案例

1、背景版块

思路：运用无序列表，然后删除列表属性。

效果 ：

2、爱心

思路：两个长方形 将其上面两个角度设置成半圆，然后旋转45°，最后拼接在一起

效果：

进阶版：

效果：