前端学习笔记--CSS布局--float定位

1.float属性

box1向右移动，box2顶替了box1的位置，box3顶替了box2的位置。

前端学习笔记--CSS布局--float定位

2.clear属性

前端学习笔记--CSS布局--float定位

案例：

一列三行布局：

前端学习笔记--CSS布局--float定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #contain{
            margin: 0 auto;
            width: 1000px;
            height: 500px;
            /*background-color: red;*/
        }
        #header{
            height: 200px;  /*宽度默认是父级元素的100%，要给高度把盒子撑开*/
            background-color: #6cf;
            margin-bottom: 5px;
        }
        #main{
            height: 500px;
            background-color: green;
            margin-bottom: 5px;
        }
        #footer{
            height: 100px;
            background-color: #6cf;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

左右布局：

前端学习笔记--CSS布局--float定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #contain{
            margin: 0 auto;
            height: 500px;
            width: 1000px;
        }
        #side{
            float: left;
            width: 300px;
            height: 500px; 
            background-color: green;       /*如果不加margin-right，把main的浮动方式改为right，也可以实现左右布局，中间仍然有5px的间隙*/
            margin-right: 5px;
        }
        #main{
            float: left;
            width: 695px;
            height: 500px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="side"></div>
        <div id="main"></div>
    </div>
</body>
</html>

3行2列布局：

前端学习笔记--CSS布局--float定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #contain{
            margin: 0 auto;
            width: 1000px;
            height: 600px;
        }
        #header{
            height: 200px;
            background-color: blue;
            margin-bottom: 5px;
        }
        #main{
            height: 600px;
            margin-bottom: 5px;
        }
        #side{
            height: 600px;
            width: 200px;
            float: left;
            background-color: red;
        }
        #mains{
            height: 600px;
            width: 795px;
            float: right;
            background-color: green;
        }
        #footer{
            height: 100px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div id="contain">
        <div id="header"></div>
        <div id="main">
            <div id="side"></div>
            <div id="mains"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

前端学习笔记--CSS布局--float定位

相关推荐