CSS3基础教程(十) - 博客详情

1.什么是脱离文档流

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

需要注意的是：使用float脱离文档流时，浮动的盒子会覆盖在不浮动的盒子上面，但是盒子中的文字依然会环绕在浮动盒子的周围。而对于使用absolute 和 fixed positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

2.脱离文档流的三种方式

目前我知道的是有三种方式来脱离文档流

1）浮动 2）固定定位 3）绝对定位

使用浮动：设计浮动的初衷仅仅是为了实现图文环绕的效果。参考以下代码，在不是浮动的情况下，无法实现图文环绕的效果：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>脱离文档流的三种方式</title>
    <style type="text/css">

        div{
            width:680px;
            margin:0px auto;
            text-indent: 2em;
        }
    </style>
</head>
<body>

<div>
    <img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/>北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。
</div>
</body>
</html>

运行效果：

给图片添加浮动效果，代码改写如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>脱离文档流的三种方式</title>
    <style type="text/css">
        img{
            float:left; /*脱离原有的图层，向左浮动*/
            padding-right:10px;
        }
        div{
            width:680px;
            margin:0px auto;
            text-indent: 2em;
        }
    </style>
</head>
<body>

<div>
    <img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/>北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。
</div>
</body>
</html>

运行效果：

使用固定定位(fix):

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>脱离文档流的三种方式</title>
    <style type="text/css">
        img{
            position: fixed;
            padding-right:10px;
        }
        div{
            width:680px;
            margin:0px auto;
            text-indent: 2em;
        }
    </style>
</head>
<body>

<div>
    <img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/>北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。
</div>
</body>
</html>

运行效果：

使用绝对定位(absolute):

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>脱离文档流的三种方式</title>
    <style type="text/css">
        img{
            position: absolute;
            padding-right:10px;
            top: 30px;
            left: 280px;
        }
        div{
            width:680px;
            margin:0px auto;
            text-indent: 2em;
        }
    </style>
</head>
<body>

<div>
    <img src="http://img.simoniu.com/CSS%E7%AE%80%E4%BB%8B02.jpg"/>北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。 惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。
</div>
</body>
</html>

运行效果：