前段时间用到了这些东西，学习顺便整理在了一起，清楚浮动几种方法没有试，有时间再深入学习一下。
*************************
八种清楚浮动的方式
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疼，还是上图更加更省事。(￣￣)~*
*******************************************************************************************
网友评论