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

最新推荐文章于 2024-07-18 17:32:29 发布

dejiebi3051

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量115

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/dydxw/p/10796339.html

版权

1.float属性

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

2.clear属性

案例：

一列三行布局：

<!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>

左右布局：

<!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列布局：

<!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>

转载于:https://www.cnblogs.com/dydxw/p/10796339.html

dejiebi3051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记--CSS布局--float定位

1.float属性box1向右移动，box2顶替了box1的位置，box3顶替了box2的位置。2.clear属性案例：一列三行布局：<!DOCTYPE html><html lang="en"><head> <meta c...
复制链接

扫一扫