前段时间用到了这些东西，学习顺便整理在了一起，清楚浮动几种方法没有试，有时间再深入学习一下。

*************************

八种清楚浮动的方式

1，父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

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

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

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

2，结尾处加空div标签 clear:both

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

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

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

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

3，父级div定义 伪类:after 和 zoom

zoom:1避免元素高度崩塌

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

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

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

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

4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

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

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5，父级div定义 overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

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

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

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

6，父级div 也一起浮动

原理：所有代码一起浮动，就变成了一个整体优点：

没有优点

缺点：会产生新的浮动问题。

建议：不推荐使用，只作了解。

7，父级div定义 display:table

原理：将div属性变成表格

优点：没有优点

缺点：会产生新的未知问题。

建议：不推荐使用，只作了解

8，结尾处加 br标签 clear:both

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both

建议：不推荐使用，只作了解。

7种三列布局

双飞翼布局使用margin负值的原理

margin为负值产生的影响

对于自身的影响

当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度，看下下面的例子

margin-left:-20px;增加了宽度

为什么是供css读取的高度？

那么试了之后上结果，

高度给出的是50，但是CSS能读到的却是高度的一半

对文档流的影响

元素如果用了margin-left:-20px;毋庸置疑的自身会向左偏移20px和定位（position：relative）有点不一样的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。总结，不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流。

对文档流的影响

所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。

对浮动的影响，定义三个盒子,每个盒子宽高均是100如下

给三个盒子都加上margin-left:-25px;

margin-left: -25px;

可以看出3个盒子都向左移动25px；

box1自身向左移动了25px，box2又覆盖了其25px，所以我们就看到了“宽度”为50px的box1

box2，box3以此类推！

那么margin-left：-50px呢?

第三个盒子margin-left：-200px时

总结：

负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。（下文有详细）

对绝对定位也是有影响的，负margin会基于其绝对定位坐标再偏移，缺点就是你必须知道这个绝对定位元素宽度的和高度才能并设置负margin值使其居中浏览器窗口，

若对于不确定宽度和高度可以用

1、流体布局

/*实现方式

左右模块各自左右浮动，并设置中间模块的margin值使中间模块宽度自适应

缺点：主要的内容模块无法最先加载，当页面内容较多时会影响用户的体验

*/

2、BFC三栏布局

/*缺点和流体布局的类似，主要内容无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了双飞翼布局*/

3、双飞翼布局

/*利用的是浮动元素margin负值的应用（原理会在文章末给出），中间div最先写*/

/*主题内容优先加载，HTML代码结构稍微复杂点*/

4、圣杯布局

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML结构相对简单，但是样式定义就稍微复杂点

5、Flex布局

x需要考虑浏览器的兼容性

6、table布局

缺点无法设置栏间距

7、绝对定位布局

简单实用，并且主要内容优先加载

///简书上编辑代码真是O疼，还是上图更加更省事。(￣￣)~*

*******************************************************************************************