本章主内容
- 浮动是什么
- 如何浮动
- 浮动的副作用及如何清除副作用
- 使用场景
一、浮动（float）
含义：让元素浮动起来，并排排列；
二、如何浮动
- float:left 1、2、3
- float:right 注意 采用倒序排列 ...3、2、1
- float:none 不浮动
- float: inherit 继承父元素浮动方式
注意点：一但元素有浮动属性，自动转换成块级元素；
三、副作用
子元素浮动、父元素则塌陷
周围元素会会受到影响 如：浮动元素脱离文档流，其他未浮动元素会占据浮动元素的位置，浮动元素会浮在为浮动元素的上面；
四、解决副作用
A、解决父元素塌陷问题
a.1、给父元素添加高度
a.2、父元素添加两个属性
- overflow:hidden
- zoom:1
a.3、父元素也给一个浮动，不建议使用，周围元素会产生副作用；
B、解决影响周围元素问题
b.1、添加一个空元素设置clear方法
- clear:none 不浮动
- clear:left 左边不允许有浮动元素
- clear:right 右边不允许有浮动元素
- clear:both 两边不允许有浮动元素
C、推荐组合使用 a.2和b.1
五、使用的场景
A、文本环绕
兄弟为文字 文字不需要浮动，浮动不是文字的兄弟元素，即可实现文本环绕。
........