浮动练习

验证给父元素加上border，不会出现 margin 塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out{
            width: 500px;
            background-color: grey;
            border: 1px solid red; 
            }
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body3>
</html>
儿子全部浮动，父亲失去所有儿子，font-size=0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out{
            width: 500px;
            background-color: grey;
            border: 1px solid red; 
            font-size: 0px;
            }
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body3>
</html>
画个页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .leftfix{
            float: left;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .rightfix{
            float: right;
        }
        .container{
            width: 960px;
            margin: 0 auto;    
            text-align: center;
        }
        .logo,.banner1,.banner2{
            height: 80px;
            background-color: #ccc;
           line-height: 80px;
           /* 水平居中 */
        }
        .logo{
            width: 200px;
        }
        .banner1{
            width: 540px;
            margin: 0 10px;
        }
        .banner2{
            width: 200px;
        }
        .menu{
            height: 30px;
            width: 960px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 30px;
        }
        .iteam1,.iteam2{
            width: 368px;
            height: 198px;
            border: 1px solid black;
            margin-top: 10px;
            margin-right: 10px;
            line-height: 198px;
        }
        .iteam3,.iteam4,.iteam5,.iteam6{
            width: 178px;
            height: 198px;
            border: 1px solid black;
            margin-right: 10px;
            line-height: 198px;
        }
        .bottom{
            margin-top: 10px;
            text-align: center;
        }
        .iteam7,.iteam8,.iteam9{
            width: 198px;
            height: 128px;
            border: 1px solid black;
            line-height: 128px;
            text-align: center;

        }
        .iteam8{
            margin:10px 0;
        }
        .iteam7{
            margin-top:10px ;
        }
        .foot{
            height: 60px;
            background-color: #ccc;
            margin-top: 10px;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="page-header clearfix">
            <div class="logo leftfix">logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>
        </div>
        <div class="menu">菜单</div>
         <div class="content clearfix">
             <div class="left leftfix">
                 <div class="top clearfix">
                     <div class="iteam1 leftfix">栏目一</div>
                     <div class="iteam2 leftfix">栏目二</div>
                 </div>
                 <div class="bottom clearfix">
                     <div class="iteam3 leftfix">栏目三</div>
                     <div class="iteam4 leftfix">栏目四</div>
                     <div class="iteam5 leftfix">栏目五</div>
                     <div class="iteam6 leftfix">栏目六</div>
                 </div>
             </div>
             <div class="right rightfix">
                 <div class="iteam7">栏目7</div>
                 <div class="iteam8">栏目8</div>
                 <div class="iteam9">栏目9</div>
            </div>
        </div>
        <div class="foot">页脚</div>
    </div>
</body>
</html>
posted @ 2024-04-02 16:09  by1314  阅读(3)  评论(0)  编辑  收藏  举报
浏览器标题切换
浏览器标题切换end