CSS排版之对float排版和position的absolute的理解（周三贴）

来源：互联网发布：华为平板windows系统编辑：程序博客网时间：2024/05/07 10:31

如图

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>混合布局编程挑战</title><style type="text/css">body{ margin:0; padding:0; font-size:30px; color:#fff}.top{height:100px;background:#9CF;}.main{margin-left:-240px;height:600px;background:red;position:relative;}.left{margin-left:240px; width:200px; height:600px;background:blue;position:absolute;  }.right{margin-left:440px;width:100%; height:600px;background:green; }.foot{height:50px;background:yellow;}</style></head>javascript:;<body><div class="top">top</div><div class="main">    <div class="left">left</div>    <div class="right">right</div></div><div class="foot">foot</div>

效果图是这样子的

right div 现在紧邻着left div。right div此时的margin-left是 240+220 = 460px

实践证明，right div假如在left div 处于position:absolute 模式下，把right div此时的margin-left 改成450px。这时right div 就会被left div遮掉10px

实践证明，right div假如在left div 处于float:left 模式下，把right div此时的margin-left 改成450px。这时right div 依旧紧邻着left div

所以position:absolute 和float 相同点是都脱离了文档流，但是float依旧迫使其它div围绕其自己（可以用边距离开自己）。而position没有此功能，就是普通的坐标排版。

前端的同学说现在不怎么用float了，flex已经崛起。

好吧。我是怕遇到这种网页代码看不懂。

0 0