CSS float和absolute

position:absolute 与float:left 有两大共性：包裹性，破坏性。

包裹性

包裹性即让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是使用了absolute属性，则100%默认宽度就会变成自适应内部元素的宽度。

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css">.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }.abs { position:absolute; }</style>
</head>
<body><div class="div"><p>无absolute</p></div><div class="div abs"><p>absolute后</p></div>
</body>
</html>

float也是典型的inline-block化元素，这种使元素inline-block化适用于任何的标签。例如让span标签支持width属性，如下设置：

span { display:block; width:100px; }

但是，使用了float:left/position:absolute之后就不需要使用display属性。

span { float:left; width:100px; }
span { position:absolute; width:100px; }

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css">.span0 { width:100px;margin-bottom:10px; background-color:#f0f3f9; }.span1 { display:block; width:100px;margin-top: 10px;margin-bottom:10px; background-color:#f0f3f9; }.span2 { position:absolute;width:100px;background-color:#f0f3f9; margin-bottom:10px; }</style>
</head>
<body><span class="span0">没有使用absolute没有使用display:block</span><span class="span1">没有使用absolute使用了display:block</span><span class="span2">使用absolute</span>
</body>
</body>
</html>

破坏性

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
</head>
<body><div style="border: 1px solid;margin-top:20px;"><div style="float:left;width:100px;height:200px;background-color:red;"></div><div style="position:relative;left:150px;width:100px;height:100px;background-color:green;"></div></div><div style="border: 1px solid;position:relative;top:150px;"><div style="position:absolute;width:100px;height:200px;background-color:red;">使用absolute对父div的影响</div><div style="position:relative;left:150px;width:100px;height:100px;background-color:green;"></div></div><div style="border: 1px solid;position:relative;top:300px;"><div style="width:100px;height:200px;background-color:red;">不使用absolute对父div的影响</div><div style="position:relative;left:150px;width:100px;height:100px;background-color:green;"></div></div>
</body>
</html>

五、position:absolute滥用

absolute属性本来是想把页面搞得像photoshop那样，一个图层一个图层覆盖。但是，页面的发展与这个背道而驰，毕竟页面是活的。
流动性布局很强调不定宽，不定高，活用标签自身属性，顺其自然，最少干预。但是由于absolute属性（尤其是带有left/top值）的破坏性，会导致高宽塌陷，于是，只能设定一个高度值（或是足以撑开高度的值），例如新浪微博导航就是绝对定位，所以导航外标签必须定高，否则，下面的元素会上来发生重叠：
想重构高质量的页面，少用绝对定位布局！

CSS float和absolute相关推荐

CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
css float left right 中间空间城数据无法显示
css float left right 中间空间城数据无法显示是由于设定了width具体值太小造成,简单用%值或不设置. 转载于:https://www.cnblogs.com/allensun- ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
教你玩转CSS Float（浮动）
目录什么是 CSS Float(浮动)? 元素怎样浮动彼此相邻的浮动元素清除浮动 - 使用 clear CSS 中所有的浮动属性什么是 CSS Float(浮动)? CSS 的 Float(浮 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
html图片浮动教程,CSS Float（浮动）
CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一 ...
float和absolute的区别
float和absolute都会脱离文档流,那二者之间有哪些不同的地方呢? 脱离文档流,就是将该元素从普通的布局中拿出来,其他元素在定位的时候,会当脱离文档流的元素不存在而进行定位. float fl ...

CSS float和absolute

包裹性

破坏性

五、position:absolute滥用

CSS float和absolute相关推荐

最新文章

热门文章