1浮动.....

1.浮动

1.float 属性规定元素如何浮动。

1.1 float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（默认值）

2.清除浮动

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素（默认值）

left - 左侧不允许浮动元素

right- 右侧不允许浮动元素

both - 左侧或右侧均不允许浮动元素

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除

的元素将显示在其下方

.div{
overflow:auto;//解决溢出问题
}

3.清除浮动的方式

1. 给父级元素单独定义高度（height）

   优点：简单、代码少、容易掌握

   缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

   建议：不推荐使用，只建议高度固定的布局时使用

2. 在标签结尾处(前)加空div标签 clear:both

   原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

   优点：简单、代码少、浏览器支持好、不容易出现怪问题

   缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

   建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

3.父级div元素定义伪元素：after和zoom

​ 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似， zoom(IE专有属性)可解决ie6,ie7浮动问题

​ 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

​ 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让 主流浏览器都支持。

​ 建议：推荐使用，建议定义公共类，以减少CSS代码。

4.父级div定义overflow:auto

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5. 父级div定义 overflow:hidden

v时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5. 父级div定义 overflow:hidden

   原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度优点：简单、代码少、浏览器支持好缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。