CSS（五）浮动

标签：col   round   over   作用   转换   高度   元素   使用场景   组合   

本章主内容

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

一、浮动（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、文本环绕

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

........

CSS（五）浮动

标签：col   round   over   作用   转换   高度   元素   使用场景   组合   

原文地址：http://www.cnblogs.com/learn-python-M/p/7628735.html