03、css float 浮动属性

一、相关概念介绍

　　1、文档流

　　 HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

　　2、浮动层

　　　给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

　　　注意事项：

　　　　　　　　① 浮动元素在文档流空出的位置是由续的(非浮动)元素填充上去。

　　　　　　　　② 块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素

二、源代码实现方式　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float属性</title>
    <style type="text/css">
        #a
        {
            background-color: #008eb7;
            height:30px;
            width:100px;
        }
        #b
        {
            background-color: #ff8ff5;
            height:30px;
            width:200px;
        }
        #c
        {
            background-color: #33fff2;
            height:30px;
            width:300px;
         }
         #d
         {
            background-color: #33bb00;
            height:20px;
            width:170px;
         }
    </style>
</head>
<body>
<div id="a" >div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<input type="text" value="input1"  />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id="d">div-d</div>
<input type="text" value="input4 " />
</body>
</html>