安利——练习

豆芽菜♀

于 2022-05-08 18:30:26 发布

阅读量194

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_57752092/article/details/124651968

版权

高度塌陷 CSS 布局 overflow clear

关键词由CSDN通过智能技术生成

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

浅说一下今天的感想，感觉最折磨我的部分就是高度塌陷。刚开始怎么都不对，找了半天原因也没有找到，过了很长时间才忽然想到了原因——高度塌陷

解决高度塌陷的几种比较简单的方法：

1.在父元素style内或者在浮动元素下方添加div使用css clear：both

2.在父元素内使用overflow：auto

3.在父元素内使用overflow：hidden

结果展示：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
                margin: 0;
                padding: 0;
            }
        .box1{
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }
        .box .header{
            height: 110px;
        }
        .left{
            float: left;
        }
        .header>.span1{
            float: right;
            padding-top: 28px;
            padding-bottom: 10px;
        }
        span{
            border-right: 1px solid #bdabbd;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 10px;
        }
        .span1 span:nth-child(1){
            color: #ed164b;
        }
        .span1 span:nth-child(3){
            color: #ed164b;
        }
        .span1 span:nth-child(6){
            color: #ed164b;
        }
        span:nth-child(6){
            border: none;
            padding-right: 0px;
        }
        form{
            border: 1px solid #d1d1d1;
            width: 235px;
            height: 30px;
            float: right;
        }
        form input:nth-child(1){
            float: left;
            outline: none;
            border: none;
            width: 205px;
            line-height: 30px;
            color: #d1d1d1;
        }
        form input:nth-child(2){
            width: 30px;
            height: 30px;
            border: none;
            background-image: url(../images/search.png);
            background-color: white;
            background-repeat: no-repeat;
            background-position: center;
            float: right;
        }

        ul li{
            list-style: none;
        }
        .box2 li{
            list-style: none;
            float: left;
            color: white;
            line-height: 54px;
            padding-right: 80px;
        }
        .banner{
            height: 54px;
            background: #0c335c;
        }
        .box2{
            width: 960px;
            margin: 0 auto;
        }
        .banner{
            height: 54px;
            background: #0c335c;
        }
        .box2{
            width: 960px;
            margin: 0 auto;
            /* 解决高度塌陷 */
            overflow: hidden;
        }
        center img{
            width: 100%;
        }
        center .box2{
            width: 960px;
            margin: 0 auto;
        }
        .box2 div{
            width: 304px;
            height: 212px;
            border: 1px solid #555454;
            float: left;
            margin-top: 52px;
            margin-bottom: 34px;
            margin-right: 21px;
        }
        .box2 .right1{
            margin-right: 0px;
        }
        footer{
            height: 206px;
            background: url(../images/footer.png) repeat;
            border-top:1px solid #cccccc;
        }
        .box3{
            width: 960px; 
            margin: 0 auto;
            height: 84px;
            padding-top: 30px;
            padding-bottom: 30px;
            border-bottom: 1px solid #ecebeb;
            line-height: 28px;
        }
        .box3 li{
            color: #336699;
            width: 210px;
            font-size: 12px;
            padding-left: 30px;
            float: left;
        }
        footer p{
            width: 960px; 
            margin: 0 auto;
            padding-left: 30px;
            font-size: 10px;
            line-height: 60px;
        }
        footer span{
            color: #0088cc;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header box1">
                <div class="left">
                    <img src="../images/logo.png" alt="">
                </div>
                <div class="span1">
                    <span>安利海外购</span>
                    <span>掌上安利</span>
                    <span>安利悦享荟</span>
                    <span>安利植物研发中心</span>
                    <span>各地店铺</span>
                    <span>安利易联网</span>
                </div>
                <form action="">
                    <input type="text" placeholder="搜索">
                    <input type="button">
                </form>
        </div>  
    </div>
    <div class="banner">
        <ul class="box2">
            <li>走近安利</li>
            <li>产品展馆</li>
            <li>公司资讯</li>
            <li>企业责任</li>
            <li>安利云购</li>
            <li>其他</li>
        </ul>
</div>
</div>
<center>
    <img src="../images/bg.png" alt="">
    <div class="box2">
        <div class="left1">
            <img src="../images/item.png" alt="">
            <p>《总裁零距离》微站</p>
        </div>
        <div class="center1">
            <img src="../images/item.png" alt="">
            <p>安利，值得选择</p>
        </div>
        <div class="right1">
            <img src="../images/item.png" alt="">
            <p>安利式体验 全心为您</p>
        </div>
    </div>
</center>
<footer>
    <ul class="box3">
        <li>安利公益基金会</li>
        <li>安利培训中心</li>
        <li>安利云购</li>
        <li>安利轻创业平台</li>
        <li>直销信息披露</li>
        <li>安利教育网</li>
        <li>网站导航</li>
        <li>安利全球官方网站</li>
        <li>联系我们</li>
        <li>企业证照</li>
        <li>隐私声明条款</li>
        <li>国家工商总局直销行业管理</li>
    </ul>
    <p>版权为安利（中国）日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号</p>
</footer>
</body>
</html>

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="header box1">
                <div class="left">
                    <img src="../images/logo.png" alt="">
                </div>
                <div class="span1">
                    <span>安利海外购</span>
                    <span>掌上安利</span>
                    <span>安利悦享荟</span>
                    <span>安利植物研发中心</span>
                    <span>各地店铺</span>
                    <span>安利易联网</span>
                </div>
                <form action="">
                    <input type="text" placeholder="搜索">
                    <input type="button">
                </form>
        </div>  
    </div>
    <div class="banner">
        <ul class="box2">
            <li>走近安利</li>
            <li>产品展馆</li>
            <li>公司资讯</li>
            <li>企业责任</li>
            <li>安利云购</li>
            <li>其他</li>
        </ul>
</div>
</div>
<center>
    <img src="../images/bg.png" alt="">
    <div class="box2">
        <div class="left1">
            <img src="../images/item.png" alt="">
            <p>《总裁零距离》微站</p>
        </div>
        <div class="center1">
            <img src="../images/item.png" alt="">
            <p>安利，值得选择</p>
        </div>
        <div class="right1">
            <img src="../images/item.png" alt="">
            <p>安利式体验 全心为您</p>
        </div>
    </div>
</center>
<footer>
    <ul class="box3">
        <li>安利公益基金会</li>
        <li>安利培训中心</li>
        <li>安利云购</li>
        <li>安利轻创业平台</li>
        <li>直销信息披露</li>
        <li>安利教育网</li>
        <li>网站导航</li>
        <li>安利全球官方网站</li>
        <li>联系我们</li>
        <li>企业证照</li>
        <li>隐私声明条款</li>
        <li>国家工商总局直销行业管理</li>
    </ul>
    <p>版权为安利（中国）日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号</p>
</footer>
</body>
</html>

css部分：

*{
    margin: 0;
    padding: 0;
}
.box1{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.box .header{
height: 110px;
}
.left{
float: left;
}
.header>.span1{
float: right;
padding-top: 28px;
padding-bottom: 10px;
}
span{
border-right: 1px solid #bdabbd;
padding-left: 10px;
padding-right: 10px;
font-size: 10px;
}
.span1 span:nth-child(1){
color: #ed164b;
}
.span1 span:nth-child(3){
color: #ed164b;
}
.span1 span:nth-child(6){
color: #ed164b;
}
span:nth-child(6){
border: none;
padding-right: 0px;
}
form{
border: 1px solid #d1d1d1;
width: 235px;
height: 30px;
float: right;
}
form input:nth-child(1){
float: left;
outline: none;
border: none;
width: 205px;
line-height: 30px;
color: #d1d1d1;
}
form input:nth-child(2){
width: 30px;
height: 30px;
border: none;
background-image: url(../images/search.png);
background-color: white;
background-repeat: no-repeat;
background-position: center;
float: right;
}

ul li{
list-style: none;
}
.box2 li{
list-style: none;
float: left;
color: white;
line-height: 54px;
padding-right: 80px;
}
.banner{
height: 54px;
background: #0c335c;
}
.box2{
width: 960px;
margin: 0 auto;
}
.banner{
height: 54px;
background: #0c335c;
}
.box2{
width: 960px;
margin: 0 auto;
/* 解决高度塌陷 */
overflow: hidden;
}
center img{
width: 100%;
}
center .box2{
width: 960px;
margin: 0 auto;
}
.box2 div{
width: 304px;
height: 212px;
border: 1px solid #555454;
float: left;
margin-top: 52px;
margin-bottom: 34px;
margin-right: 21px;
}
.box2 .right1{
margin-right: 0px;
}
footer{
height: 206px;
background: url(../images/footer.png) repeat;
border-top:1px solid #cccccc;
}
.box3{
width: 960px; 
margin: 0 auto;
height: 84px;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #ecebeb;
line-height: 28px;
}
.box3 li{
color: #336699;
width: 210px;
font-size: 12px;
padding-left: 30px;
float: left;
}
footer p{
width: 960px; 
margin: 0 auto;
padding-left: 30px;
font-size: 10px;
line-height: 60px;
}
footer span{
color: #0088cc;
}