码迷,mamicode.com
首页 > 其他好文 > 详细

float 浮动 clear:both清除浮动 ,绝对定位,相对定位

时间:2015-04-10 22:07:39      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

<1>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #header {
         height:100px;
         width:600px;
         background:blue;
         margin:0px auto; /*上下外边距是0px,左右外边距是自动 即:左右居中*/
        }

        #main {
        /*height:500px;*/
        width:600px;
        margin:0px auto;
        }

        #left {
        height:300px;
        width:150px;
        float:left;
        background-color:gold
        }
        #center {
            height: 300px;
            width: 300px;
            float: left;
            background: dimgrey;
        }
        #right {
            height: 300px;
            width: 150px;
            float: left;
            background-color: yellow;
        }
        #bottom {
            /*现在我就来说说这个clear 因为#main 这个div是一个大盒子,里面包裹这两个小盒子,这个大盒子没有设置高度,即它的高度为0px,而当大盒子里面的两个小盒子浮动起来了,那么这个#tottom这个下边的盒子就会占据到#header的下面  效果图请看 图1*/

            /*clear:both;*/ /*因为上面的三个盒子都浮动了。我这个盒子不想浮动,所有这里我要清除浮动*/
            height: 100px;
            width: 800px;
            margin: 0px auto;
            background-color: gray;
        }
    </style>
</head>
<body >
    <div id="header">头(#header)</div>
    <div id="main">
        <div id="left">左(#left)</div>
        <div id="center">中(#center)</div>
        <div id="right">右(#right)</div>
    </div>
    <div id="bottom">下(#bottom)</div>
</body>
</html>

图1

技术分享


<2>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #header {
         height:100px;
         width:600px;
         background:blue;
         margin:0px auto; /*上下外边距是0px,左右外边距是自动 即:左右居中*/
        }

        #main {
        /*height:500px;*/
        width:600px;
        margin:0px auto;
        }

        #left {
        height:300px;
        width:150px;
        float:left;
        background-color:gold
        }
        #center {
            height: 300px;
            width: 300px;
            float: left;
            background: dimgrey;
        }
        #right {
            height: 300px;
            width: 150px;
            float: left;
            background-color: yellow;
        }
        #bottom {
            /*现在我就来说说这个clear 因为#main 这个div是一个大盒子,里面包裹这两个小盒子,这个大盒子没有设置高度,即它的高度为0px,而当大盒子里面的两个小盒子浮动起来了,那么这个#tottom这个下边的盒子就会占据到#header的下面  效果请看 图1 */

            clear:both; /*因为上面的三个盒子都浮动了。我这个盒子不想浮动,所有这里我要清除浮动   加了这么一句,效果请看 图2 */
            height: 100px;
            width: 800px;
            margin: 0px auto;
            background-color: gray;
        }
    </style>
</head>
<body >
    <div id="header">头(#header)</div>
    <div id="main">
        <div id="left">左(#left)</div>
        <div id="center">中(#center)</div>
        <div id="right">右(#right)</div>
    </div>
    <div id="bottom">下(#bottom)</div>
</body>
</html>

图2

技术分享


float 浮动 clear:both清除浮动 ,绝对定位,相对定位

标签:

原文地址:http://blog.csdn.net/fanbin168/article/details/44985331

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!