html中float浮动与margin的结合使用

1：

如图先设计一个大布局容器，在里面再设计两个div小面积的容器，这样更直观的说明浮动布局。

<style type="text/css">
        #da{
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        #xiao1{
            width: 50px;
            height: 50px;
            background: lightblue;
        }
        #xiao2{
            width: 50px;
            height: 50px;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="da">
    <div id="xiao1"></div>
    <div id="xiao2"></div>

</div>
</body>

2：

如图以上代码为默认布局，接下来我们用浮动来控制它们的位置。

给小xiao1添加左浮动，xiao2添加右浮动。

代码如图所示：

<style type="text/css">
        #da{
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        #xiao1{
            width: 50px;
            height: 50px;
            background: lightblue;
            float: left;
        }
        #xiao2{
            width: 50px;
            height: 50px;
            background: yellow;
            float: right;
        }
    </style>
</head>
<body>
<div id="da">
    <div id="xiao1"></div>
    <div id="xiao2"></div>

</div>
</body>

接下来用margin使两个xiao布局不紧贴da布局。

代码如下图所示：

<style type="text/css">
        #da{
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        #xiao1{
            width: 50px;
            height: 50px;
            background: lightblue;
            float: left;
            margin: 10px 0 0 20px;
        }
        #xiao2{
            width: 50px;
            height: 50px;
            background: yellow;
            float: right;
            margin: 10px 20px 0 0;
        }
    </style>
</head>
<body>
<div id="da">
    <div id="xiao1"></div>
    <div id="xiao2"></div>

</div>
</body>