浮动元素的高度问题：
1、在标准流中内容的高度可以撑起父元素的高度
2、在浮动流中浮动元素是不可以撑起父元素的高度。
清除浮动方式：
1、给前面一个父元素设置高度，在企业开发中，我们能不写高度就不写高度，所以这种方式用得较少。
2、给后面的盒子添加clear属性。
none 默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
left 不要找前面左浮动的元素。
right 不要找前面的右浮动的元素
both 不要找前面左浮动和右浮动的元素
注意点：当给某个元素添加clear属性之后，那么这个属性的margin属性就会失效，想要有效得给body设置边框，但是企业开发中不要给body设置边框。
3、隔墙法（企业开发中不推荐使用）
（1）外墙法
两个盒子中间添加一个额外的块级元素，给这个额外添加的块级属性添加一个clear: both;属性。
注意点：外墙法可以让第二个盒子使用margin-top属性，不可以让第一个盒子使用margin-bottom属性。所以一般情况不使用margin-top属性和margin-bottom属性，而是给额外添加的块级元素的高度。
（2）内墙法
在第一个盒子中所有子元素之后添加一个额外的块级元素，给这个额外添加的块级属性添加一个clear: both;属性。
注意点：内墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性也可以设置额外添加的块级元素的高度。
外墙法和内墙法的区别;
外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度。
伪元素选择器：
给指定标签的内容前面添加一个子元素，或者给指定标签的内容后面添加一个子元素。
格式：
标签名称::before{
属性名称:值;
}
例：
div::before{
content: "文字1";/*指定添加的子元素中存储的内容*/
width: 50px;
height: 0px;/*隐藏添加的子元素第一步*/
background-color: khaki;
display: inline-block;/*指定添加的子元素的显示模式*/
visibility: hidden;/*隐藏添加的子元素第二步*/
}
标签名称::after{
属性名称:值;
}
4、用伪元素选择器给第一个盒子添加一个块级元素，然后给该块级元素设置clear: both;
例：
.box1::after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
IE6无法兼容该方式，如果想让IE6兼容，则需要在上面代码后添加以下代码：
.box1{
*zoom:1;/*兼容IE6*/
}
5、只需在box1中加入overflow: hidden;
注意点：IE6无法兼容该方式
overflow: hidden;作用：
1、可以将超出标签范围的内容裁减掉。也可以用来清楚浮动。
2、在嵌套关系中，给外面盒子设置overflow: hidden;也可以保证里面盒子使用margin-top时，外面不会被顶下来。
网易注册界面还原：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
.header{
width: 960px;
height: 80px;
margin: 0 auto;
/*background-color: #ffada3;*/
padding-top: 28px;
box-sizing: border-box;
padding-top: 28px;
}
a{
text-decoration: none;
font-size: 13px;
color: #cccccc;
}
.shangzuo{
width: 644px;
height: 45px;
background: url("images/网易logo.png") no-repeat 0 0;
float: left;
}
.header .shangzuo a{
width: 210px;
height: 38px;
/*background-color: #ffcaf3;*/
display: inline-block;
}
.shangyou{
width: 200px;
height: 45px;
/*background-color: darkturquoise;*/
float: right;
text-align: right;
}
.header .shangyou a{
text-decoration: none;
font-size: 13px;
color: #cccccc;
line-height: 38px;
/*background-color: #ffcaf3;*/
}
.content{
width: 960px;
height: 600px;
/*background-color: #ffcaf3;*/
margin: 0 auto;
}
.top{
width: 960px;
height: 38px;
/*background-color: #ffcaf3;*/
background: url("images/qiepian.png") repeat-x;
}
.content .top .left{
width: 960px;
height: 38px;
background: url("images/qiepianzuo.png") no-repeat left 0px;
}
.content .top .right{
width: 960px;
height: 38px;
background: url("images/qiepianyou.png") no-repeat right 0px;
}
h1{
color: white;
font-size: 12px;
line-height: 38px;
text-indent: 2em;
}
.bottom{
width: 960px;
height: 562px;
background-color: #eff8ff;
}
.content .bottom .zuo{
width: 642px;
height: 562px;
/*background-color: #ffcaf3;*/
float: left;
padding-top: 50px;
padding-left: 80px;
box-sizing: border-box;
border: 1px solid #ccc;
border-top: none;
}
.content .bottom .zuo .zuoshang{
width: 560px;
height: 60px;
/*background-color: #ec7465;*/
}
.content .bottom .zuo .zuoshang ul{
width: 416px;
height: 36px;
/*background-color: #ffcaf3;*/
list-style: none;
background: url("images/biaoge.png") no-repeat left 0;
}
.content .bottom .zuo .zuoshang ul li{
float: left;
width: 138px;
height: 36px;
/*background-color: darkturquoise;*/
line-height: 36px;
text-align: center;
}
.content .bottom .zuo .zuoxia{
width: 560px;
height: 373px;
/*background-color: antiquewhite;*/
}
.content .bottom .zuo .zuoxia p{
font-size: 12px;
margin-left: 80px;
line-height: 28px;
}
.content .bottom .you{
width: 318px;
height: 562px;
/*background-color: #ec7465;*/
float: right;
padding-top: 0px;
padding-right: 3px;
box-sizing: border-box;
background-color: #eff8ff;
border: 1px solid #cccccc;
border-top: none;
}
.line{
width: 413px;
height: 28px;
/*background-color: chartreuse;*/
}
.line span{
float: left;
width: 60px;
height: 28px;
font-size: 12px;
line-height: 28px;
text-align: right;
}
.line .xiao{
width: 0;
color: red;
}
.line div{
float: right;
width: 333px;
height: 28px;
}
.line div input{
width: 214px;
height: 24px;
}
.line div select{
width: 98px;
height: 28px;
}
.line .kuang2{
width: 328px;
}
.line .neirong{
/*想让多个盒子顶部对齐，就让这多个盒子同时浮动*/
float: left;
margin-right: 10px;
}
.line img{
width: 100px;
height: 28px;
float: left;
}
.content .bottom .zuo .zuoxia input[type=submit]{
width: 145px;
height: 46px;
background: url("images/lijizhuce.png") no-repeat -22px -37px;
border: none;
font-size: 20px;
color: white;
margin-left: 80px;
margin-top: 20px;
}
.footer{
width: 960px;
height: 48px;
/*background-color: darkturquoise;*/
margin: 0 auto;
}
.footer p{
font-size: 12px;
color: #ccc;
text-align: center;
line-height: 48px;
}
</style>
</head>
<body>
<div class="header">
<div class="shangzuo">
<a href="#" title="163网易免费邮"></a>
<a href="#" title="126网易免费邮"></a>
<a href="#" title="yeah.net网易免费邮"></a>
</div>
<div class="shangyou">
<a href="#">了解更多</a>
|
<a href="#">反馈更多</a>
</div>
</div>
<div class="content">
<div class="top">
<div class="left">
<div class="right"><h1>欢迎注册无限容量的网易邮箱！邮箱地址可以登录使用其他网易旗下产品。</h1></div>
</div>
</div>
<div class="bottom">
<div class="zuo">
<div class="zuoshang">
<ul>
<li>注册字母邮箱</li>
<li>注册手机号码邮箱</li>
<li>注册VIP邮箱</li>
</ul>
</div>
<div class="zuoxia">
<div class="line">
<span><span class="xiao">*</span>邮件地址</span>
<div>
<input type="text" value="建议使用手机号注册">@<select>
<option value="163.com">163.com</option>
<option value="162.com">162.com</option>
<option value="lnj.net">lnj.net</option>
</select>
</div>
</div>
<p>6~8个字符，可使用字母、数字、下划线，需以字母开头</p>
<div class="line">
<span><span class="xiao">*</span>密码</span>
<div>
<input type="password" class="kuang2">
</div>
</div>
<p>6~16个字符，区分大小写</p>
<div class="line">
<span><span class="xiao">*</span>确认密码</span>
<div>
<input type="password" class="kuang2">
</div>
</div>
<p>请再次填写密码</p>
<div class="line">
<span><span class="xiao">*</span>手机号码</span>
<div>
<input type="password" class="kuang2">
</div>
</div>
<p>忘记密码时，可以通过该手机号码找回密码</p>
<div class="line">
<span><span class="xiao">*</span>验证码</span>
<div>
<input type="text" class="neirong">
<img src="images/yanzhengma.webp">
</div>
</div>
<p>请填写图片中的字符，不区分大小写</p>
<p>
<input type="checkbox" checked="checked">
同意<a href="#">“服务条款”</a>和<a href="#">“隐私权保护和个人信息利用政策”</a>
</p>
<input type="submit" value="立即注册">
</div>
</div>
<div class="you">
<img src="images/youxiang.png">
</div>
</div>
</div>
<div class="footer">
<p>
<a href="#">关于网易</a>
<a href="#">关于网易免费邮邮</a>
<a href="#">箱官方博客</a>
<a href="#">客户服务</a>
<a href="#">隐私政策</a>|网易公司版权所有 © 1997- 2016<p>
</p>
</div>
</body>
</html>
结果：
注意点：
一、布局网页一般步骤：
1、清空默认边距
2、清空默认样式
3、利用body设置整个界面的文字信息、文字大小、文字字体、文字颜色
二、编写代码时添加一定的注释
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
