CSS（五）浮动

本章主内容

• 浮动是什么
• 如何浮动
• 浮动的反作用及如何清除反作用
• 使用场景

1、浮动（float）

含义：让元素浮动起来，并排排列；

2、如何浮动

• float:left     一、二、3
• float:right    注意 采用倒序排列  ...三、二、1
• float:none  不浮动
• float: inherit   继承父元素浮动方式

注意点：一但元素有浮动属性，自动转换成块级元素；

3、反作用

子元素浮动、父元素则塌陷

周围元素会会受到影响 如：浮动元素脱离文档流，其余未浮动元素会占据浮动元素的位置，浮动元素会浮在为浮动元素的上面；

 

4、解决反作用

A、解决父元素塌陷问题

a.一、给父元素添加高度

a.二、父元素添加两个属性

• overflow:hidden
• zoom:1

a.三、父元素也给一个浮动，不建议使用，周围元素会产生反作用；

B、解决影响周围元素问题

b.一、添加一个空元素设置clear方法

• clear:none   不浮动
• clear:left   左边不容许有浮动元素
• clear:right  右边不容许有浮动元素
• clear:both  两边不容许有浮动元素

C、推荐组合使用 a.2和b.1

 

5、使用的场景

A、文本环绕

兄弟为文字 文字不须要浮动，浮动不是文字的兄弟元素，便可实现文本环绕。

........