CSS float和absolute

position:absolutefloat:left 有两大共性:包裹性,破坏性。

包裹性

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


<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>无absolutep>
    div>
    <div class="div abs">
        <p>absolute后p>
    div>
body>
html>

CSS float和absolute_第1张图片

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; }

<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:blockspan>
    <span class="span1">没有使用absolute使用了display:blockspan>
    <span class="span2">使用absolutespan>
body>
body>
html>

CSS float和absolute_第2张图片

破坏性


<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>

CSS float和absolute_第3张图片

五、position:absolute滥用

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

你可能感兴趣的:(css)