[转]设置float后元素和文档流的关系

脱离了正常的文档流。

<!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>
</head>
<body>
<div style="border:1px solid red;">
  <div style="float:left;width:100px;height:100px;border:1px solid green;">
</div>
</body>
</html>

同position:absolute的脱离还是有一些区别的。
假如，设置absolute的层的父级position未设置的话（或设为static），这个层就会脱离到body。
而float:left的话，还是跟随其父级的。

<!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>
</head>
<body>
<div style="border:1px solid red; margin-top:300px;">
  <div style="float:left;width:100px;height:100px;border:1px solid green;"></div>
  <div style="border:1px solid blue;background:#ccc;">哀伤的哈<br />哀伤的哈<br />哀伤的哈<br />哀伤的哈<br /></div>
</div>
</body>
</html>

 

posted @ 2013-09-11 11:56  Acacia Sun  阅读(93)  评论(0)    收藏  举报