CSS彻底研究(3)-浮动,定位

发表于 2014-07-07 分类于 css

CSS 彻底研究(3)-浮动,定位

$1 一 . 浮动 float
$1 I . 定义及规则
float 默认为 none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。
$1 II . 演示规则
准备代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        body
        {
            margin: 0;
            padding: 0;
        }

        #father
        {
            background-color: cyan;

            /*父级div 没有定位 造成子div的margin-top传递给父级*/
            position: absolute;
        }

            #father *
            {
                margin: 10px;
                padding: 10px;
                border: 1px dashed red;
            }

        #son1
        {
        }

        #son2
        {
        }

        #son3
        {
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">#son1</div>
        <div id="son2">#son2</div>
        <div id="son3">#son3-son3son3son3</div>
        <p>
        这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
        </p>
    </div>
</body>
</html>