浮动

浮动的影响

相当设置了 inline-block
- inline-block
  - 默认按内容显示宽高可以设定宽高
  - 行内摆放
浮动 float:left/right
浮动的空挡会被后续块元素填充
行内元素会环绕浮动元素 ( 文本 … )

<p style="float: left;height: 100px;width: 100px; background-color: #ff4d4f;">元素1</p>
<p style="background-color: #ffec3d;">元素2</p>
<a style="background-color: #13c2c2;">元素3</a>
<a style="background-color: #eb2f96;">元素4</a>
<p style="background-color: #adc6ff;">元素5</p>

元素1 设置宽度高度之后可以明显看到后续元素填充了浮动元素的空挡

把元素1改成透明之后可以明显看到行内元素环绕元素1 （行内元素包括文本）

浮动的附带效果

1
2
3

<div>
	<span style="float:left;">元素1</span>
</div>

容器高度没了因为子元素浮动造成高度塌陷

解决方法

设置容器高度

可以解决容器高度塌陷问题

<div style="height:30px;">
	<span style="float:left;">元素1</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

- 结尾处加空 `div` 标签,样式为 `clear:both`; 

  - `clear:both`

    - 清除浮动

  - 同样可以解决高度塌陷问题

  - 清除浮动标签后的元素不受浮动影响

  - ```javascript
    <div>
            <span style="float:left;">元素1</span>
            <div style="clear: both;"></div>
            <p>元素2</p>
        </div>

给容器设置 overflow: hidden;
- 也可以解决高度塌陷问题
- 子元素的后继元素还是会受到浮动影响
- 不会影响容器了
- ```
<div style="overflow: hidden;">
        <span style="float:left;">元素1</span>
</div>
```