脱离文档流两操作，float和position:absolute的区别
脱离文档流两操作，float和position:absolute的区别
ydymz
发布于 2018-09-10 15:48:46
发布于 2018-09-10 15:48:46
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行；
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
float时：
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0;margin: 0}
.box1{background-color:red;float:left；width:100px;}
.box2{background-color:gray;float:right；width:100px;}
.box3{background-color: aqua;margin: 0 110;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>显示效果如下：可见，box3的margin是box3边框到浏览器的距离，box2的位置并没有收到float的box1 box2的影响。
当把box3样式改为：.box3{background-color: aqua;}时，可以看到box3中间的文本依然为box1 box2让出了位置。
position:absolute时：
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0;margin: 0}
.box1{width:100px;background-color:red;position:absolute;left:0;top:0}
.box2{width:100px;background-color:gray;position:absolute;right:0;top:0}
.box3{background-color: aqua;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>显示效果：
可以看到，box3中的文本不见了，被box1遮盖了，也可以反映出，box3的定位也是不受到绝对定位的box1 box2的影响，而且box3的文字也没有为box1 box2让出位置。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-01-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读