æ¬æä»ç»cssä¸floatåpositionçåºå«
å·¥å ·/ææ
Dreamwear
åºå«ï¼
1ãfloatçå®ä¹å常è§ç¨æ³ï¼
floatå±æ§å®ä¹å ç´ å¨åªä¸ªæ¹åæµ®å¨ã
以å¾è¿ä¸ªå±æ§æ»åºç¨äºå¾åï¼ä½¿ææ¬å´ç»å¨å¾åå¨å´ï¼ä¸è¿å¨ CSS ä¸ï¼ä»»ä½å ç´ é½å¯ä»¥æµ®å¨ãæµ®å¨å ç´ ä¼çæä¸ä¸ªå级æ¡ï¼èä¸è®ºå®æ¬èº«æ¯ä½ç§å ç´ ãã
å®ä¾å¦ä¸ï¼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div{
width:200px;
height: 200px;
border: 2px solid pink;
margin:0 5px;
float: left;
}
</style>
</head>
<body>
<div>11111</div>
<div>22222</div>
<div>33333</div>
</body>
</html>
floatå±ç¸ä½¿å¾å级å ç´ çdivå¯ä»¥å¨åä¸è¡å¹¶æï¼ææå¦ä¸ï¼
2ãpositionå®ä¹åç¨æ³ï¼
è¿ä¸ªå±æ§å®ä¹å»ºç«å ç´ å¸å±æç¨çå®ä½æºå¶ãä»»ä½å ç´ é½å¯ä»¥å®ä½ï¼ä¸è¿ç»å¯¹æåºå®å ç´ ä¼çæä¸ä¸ªå级æ¡ï¼èä¸è®ºè¯¥å ç´ æ¬èº«æ¯ä»ä¹ç±»åãç¸å¯¹å®ä½å ç´ ä¼ç¸å¯¹äºå®å¨æ£å¸¸æµä¸çé»è®¤ä½ç½®å移ã
å ¶å±ç¸å¼æï¼
ç»å¯¹å®ä½çå®ä¾ï¼
比如页面有两个元素，<div id="div1"></div><div id="div2"></div>
这时这两个元素是上下显示的，但是加上了float:left;之后，就会在同一行显示了。
而position，分为absolute,reaative,static,fixed四种。
static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。本回答被提问者采纳
链接：https://www.zhihu.com/question/19588854/answer/13243044
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
在绝大多数Web开发者的语境中，“布局”这个术语和“排版”是有差异的。“布局”偏向于指宏观的GUI区域划分，比如双栏布局或三栏布局等。从这一点出发，float其实本不是一项用于“布局”的属性。float对应的其实是传统印刷排版中图文混排中的环绕。这其实可以理解，因为CSS的模型和术语脱胎于传统排版，故而与计算机GUI技术通常基于组件的模型相差甚远。除了float之外，另一个例子是CSS中上下margin的collapse，显然这是为了满足段落排版的需求。所以像float、margin collapse等，在典型的GUI技术中是没有的。还有，CSS box model中，width/height不算入padding和border，许多开发者对这点很不适应，这实际上是GUI的控件思维与CSS排版思维的冲突。这个冲突在浏览器技术实现上的遗迹就是IE臭名昭著的“hasLayout”。元素“has layout”的真实意思是这样的元素直接对应一个控件。也正是由于IE很naive的在实现中直接结合了这两种矛盾的模型，从而导致了无数的布局bug。
言归正传，CSS1时代的网页还很简陋，但是随着万维网的迅猛发展，Web界面也迅速进化，当初简单的如同书页般的通栏式网页迅速绝迹，frameset由于天生存在的一堆问题也很快退出主流，这时CSS在GUI布局方面就显出了缺陷，开发者被迫使用各种trick。比如历史悠久的table布局。后来table布局被鄙视，开发者逐渐转向了float布局。
要说float布局之所以流行，IE“功”不可没。在IE中，has layout的元素是不会环绕float元素的（因为has layout的元素自己是一个控件，所以总是保持一个矩形区域）。这本来是一个bug，但是其效果却正好符合常见的双栏布局的需要。另外IE下float元素会自动撑开其父级container元素（当然前提是container元素也是has layout的），这其实也是bug，但是也恰好符合模块布局的需求。后来所谓inline-block布局其实正是这些bug的合理化。
站在今天回望过去十多年的CSS实践，我们可以发现，无论float布局还是后来的inline-block布局，其实都是trick。所谓trick，就是将一些特性挪作他用，以很曲折的方式实现出想要的效果。CSS作为样式语言，其可维护性的最终来源，就是代码能清晰的表达出设计意图。而CSS trick当然不能很好的满足这一点。
那么如何才能真正用CSS来表达布局？如田乐所说，这有赖于“CSS3的进化”。如multiple column、flex box、grid layout等。其中直接对应目前float布局/inline-block布局所要达到效果的，是flex box。当然，考虑到兼容性问题（IE9仍不支持flex box模块，IE10才支持），我们可能很长时间内还是会继续使用float布局，不过必须始终牢记这是trick，是workaround。如有可能，最好引入SCSS/LESS之类的CSS框架来对此种布局trick做进一步抽象和解耦。
再说position布局。position其实比float要更接近“布局”属性。但是position的问题是，所谓布局是设定各区域（元素）的关联和约束，而定位只是设定单一元素的位置大小。要实现一个布局，要对多个定位元素中手动设定相关的参数（如左栏width:200px，右栏left:200px），相当于人为的把大小和位置参数计算出来。这违背了DRY原则，也无法真正实现关联约束。（如左栏设了max/min-width之后，最终实际width未必是200px，此时右栏怎么设left值？又如一个水平固定width、垂直自适应height的绝对定位元素，我们如何从它的底部继续排下一个元素？）除非我们引入JavaScript脚本来进行计算。因此运用position布局的限制条件相当多，通常只适合那些相对孤立的部件（如页头页脚）或较为简单且各区域大小位置固定的布局。至于说以JavaScript实现的布局管理器，是将position作为实现布局的底层技术，已经算不得CSS了（因为你也不写CSS）。