<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列布局实例</title>
<style>
body, h1, ul,img{ /*重置默认样式*/
/*background-color: brown;*/
margin: 0;
padding:0;
}
.header {
/*块框默认宽度就是100%,可省*/
/*width: 100%;*/
height: 100px;
/* background-color: green; */
}
.header .top {
/*width: 90%;*/
width: 900px;
margin: 0 auto;
/* background-color: yellow; */
/*height: 60px;*/
}
.header .top .logo {
/*width: 30%;*/
width: 300px;
height: 60px;
float: left;
/*background-color: aqua;*/
}
.header .top .siteName {
/*width: 70%;*/
width: 600px;
height: 60px;
font-size: 2vw; /*字体根据当前窗口进行缩放*/
line-height: 60px;
font-style: italic;
float: right;
/*background-color: brown;*/
}
.header .nav {
/*width: 90%;*/
width: 900px;
height: 40px;
margin: 0 auto;
background-color: #565656;
line-height: 40px;
}
.header .nav ul li {
list-style: none;
}
.header .nav ul li a {
color: white;
float: left;
text-decoration-line: none;
padding: 0 20px 0;
}
.header .nav ul li a:hover {
color: red;
font-size: 1.1em;
text-decoration-line: underline;
}
.main {
/*width: 90%;*/
width: 900px;
/*父元素没有包住左右二列,怎么办?*/
/*height: 700px;*/
/*border: 2px solid red;*/
background-color: brown;
margin: 10px auto ;
}
.main .banner {
width: 100%;
height: 450px;
margin-bottom: 15px;
background-color: #565656;
}
.main .left {
width: 300px;
height: 700px;
background-color: aqua;
float:left;
}
.main .left .honor {
height: 300px;
margin: 20px 0;
padding: 20px;
background-color: blue;
}
.main .left .contact {
margin-top: 60px;
padding: 20px;
background-color: red;
}
.main .right {
width: 590px;
height: 700px;
background-color: gold;
float: right;
}
.main .right .about {
height: 300px;
background-color: greenyellow;
padding: 20px;
overflow: auto;
}
.main .right .product {
background-color: grey;
padding: 20px;
}
/*重点:当父框中的子框浮动后脱离文档流后,父框就不占空间了,
最简单的解决方法,就是在父框中清除浮动元素的影响*/
.main .clear {
/*clear: left;*/
/*clear: right;*/
clear: both;
}
.footer {
/*width: 90%;*/
width: 900px;
height: 70px;
background-color: #565656;
margin: 0 auto ;
text-align: center;
}
.footer p {
line-height: 70px;
color: #999;
}
.footer p:hover {
color: white;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div>
<!--网站头部的顶部区域-->
<div>
<!--网站logo-->
<div>
<img src="images/logo.png" alt="" width="60">
</div>
<!--网站名称-->
<div>
<h1>合肥最强王者有限公司</h1>
</div>
<div></div>
</div>
<!--网站头部的导航区域-->
<div>
<ul>
<li><a href="">首页</a></li>
<li><a href=""> 关于我们</a></li>
<li><a href="">公司新闻</a></li>
<li><a href="">最新产品</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div>
<div>
<img src="images/banner.jpg" alt="" width="100%">
</div>
<div>
<div>
<h2>企业荣誉</h2>
<img src="images/honor.jpg" alt="" width="100%">
</div>
<div>
<h2>联系方式:</h2>
<p>电话:0551-99988866</p>
<p>邮箱:zqwz@aliyun.com</p>
<p>网站:www.zqwzjsw.com</p>
<p>地址:合肥市包河区南二环99号</p>
</div>
</div>
<div>
<div>
<h2>关于我们</h2>
<p>一百多年以来,公司所推崇的“研究,创新,追求高品质”的经营哲学使公司的研发拥有坚实的基础。
1911年诞生的油包水专利配方的妮维雅润肤霜是公司在化妆品事业部研发的开始。
今天,在全球公认的最具权威性的肌肤及医学研究中心—BDF公司的PGU研究中心,
有一百多位博士正在研发自然,高效的产品,其成果已使“妮维雅”成为全球最大的护肤用品品牌。
其品牌形象 —“妮维雅能给肌肤最温和的呵护”已深入人心.在欧洲,“妮维雅”更已成为皮肤保养的代名词。
妮维雅产品在身体保养，脸部保养，防晒，唇部保养，个人清洁，男士护肤等品类已稳居欧洲市场排名第一。
2003年8月美国商业周刊杂志公布的最新全球100个最有价值品牌排行榜上，妮维雅品牌名列第92位，
品牌价值增长8%。2007年德国拜尔斯道夫出资3.17亿欧元（折合约人民币35亿元），
购入丝宝国际集团旗下丝宝日化85%的股份。</p>
</div>
<div>
<h2>最新产品</h2>
<div>
<img src="images/1.jpg" alt="" width="22%">
<img src="images/2.jpg" alt="" width="22%">
<img src="images/3.jpg" alt="" width="22%">
<img src="images/4.jpg" alt="" width="22%">
</div>
</div>
</div>
<div></div>
</div>
<div>
<p>合肥最强王者有限公司 ©版权所有 | 备案号:皖ICP-16998877</p>
</div>
</div>
</body>
</html>In this section, there are two divs, .logo and .sitename, in the div .top. Why is there no need to clear the floats in this step? The following. The nav navigation block did not jump up either
勇敢的心2018-07-28 09:26:23
There is something wrong with what you wrote, the class is not included.
灭绝师太2018-07-28 09:25:47
If the top height of the div is sufficient, it is okay not to clear the float.
