开发者学堂课程【零基础学前端 HTML+CSS ：浮动案例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5144
浮动案例
内容介绍
一、盒子模型布局
二、浮动的实际案例
一、盒子模型布局
早期的时候 html 有一个 table 布局，在 css4.0 和 div 出现之前，都使用 table 进行布局。后来 div 出现以后，有一个重构网站的计划，推荐用户使用 div 结构的布局，这样更容易被样式表所控制。
盒子模型布局
//header:头部，分割 logo 以及广告条等
//container:表头的内容
//nav:表示一个菜单
//content:表示内容
//side：右边部分
//pagefooter:角标信息
nav,content,side 三个元素启用浮动，这是最基本的浮动模型，用代码实现一下。
二、浮动的实际案例
1、首先新建一个 html 代码叫 float2。首先看一下布局，上面一个 logo，中间菜单，中间就三块，左边一个栏，中间一个栏，右边一个栏，底下是一个栏，就是这么一个结构。
2、先加一 div，顶部的标识，顶部的一个名称，再写一个菜单，再放一个主窗口，嵌套三个 div，先写角标的信息，地址，电话，左通右，也可以按照布局进行命名，名字都可以自定义，只要能记得住就可以。
代码如下：
<div id="header">顶部</div>
<div id="con">菜单</div>
<div id="main">
<div id="nav">内容1</div>
<div id="content">内容2</div>
<div id="side">内容3</div>
</div>
<div id="footer">
地址:XXXXXXXXXXXXXXXX电话:XXXXXXXXXXX
3、需要用到样式表进行控制，在样式表里面从上往下分别写，因为是 id 的一个命名，所以它属于 id 命名，要写#，因为网页不能太窄，现在看到的网站设置都是1000像素，高100像素，刷新可以看到块已经出来了。
< !DOCTYPE html >
< html >
<head lang=" en" >
< meta charset="UTF-8" >
<title>/title>
<style>
#header {
width:1000px ;
height: 100px;
}
</style>
</head>
4、再加一个背景颜色，这样在做素材的时候比较容易看出来，比如北京加一个蓝色，这时就可以看到1000宽，100高。
background-color : #b3d4fc;
5、让它居中，div 可以设置一个值，就自动居到中间。
Margin：suto；
6、下边是 con，宽度1000像素，高度50像素，背景颜色也让它浅一点，灰色。可以看到一个灰色的菜单，以前有做过横排的无序列表，可以把无序列表粘贴进来，在这就不给它加进来了。
#con{
width: 1000px ;
height: 50px ;
background-color : #c0c0c0;
margin: auto;
}
7、主区域，宽1000像素，高先不设定。内容其实就是里面的高。
#main{
width: 1000px ;
background-color : #c0c0c0;
margin: auto;
}
8、分别设置内容的区域，外框是1000，里面就不能是1000，里面可以设置百分比，也可以设置像素，这里先设置像素，比如左右分别是200像素，背景颜色设置为红绿蓝，宽200，让中间大一点，但是不能设置600，设置500。
#nav{
width: 200px ;
background-color : red;
margin:0px 10px;
}
#content{
width: 500px ;
background-color :green;
margin:0px 10px;
}
#side{
width: 200px ;
background-color : blue;
margin:0px 10px;
}
9、三个块现在都没有受到浮动，需要让它们浮在上面，设置一个高，都是500，这样块才能撑起来，三个都要加上 float。
#nav{
width: 200px ;
background-color : red;
height:500px;
float:left;
}
#content{
width: 500px ;
background-color :green;
height:500px;
float:left;
}
#side{
width: 200px ;
background-color : blue;
height:500px;
float:right;
}
10、中间出现了一个地址，这个地址受到了上面浮动的影响，清除这个浮动，因为它不再属性里面，外面还套一个 main，如果地址的 div 是嵌套在里面，它就会受到影响，输入 clear，把受到的影响清除掉。
#footer{
width:1000px;
background-color:#ff00ff;
height:100px;
clear:both;
}
11、在里面可以设置三个 margin 的值。也可以累加一个值让它居中。用浮动的手法进行页面排版，页面最原始最基础浮动的排版就是用这种形式进行设计。
#nav{
width: 200px ;
background-color : red;
height:500px;
float:left;
margin:0px 10px;
}
#content{
width: 500px ;
background-color :green;
height:500px;
float:left;
margin:0px 10px;
}
#side{
width: 200px ;
background-color : blue;
height:500px;
float:right;
margin:0px 10px;
}
#footer{
width:1000px;
background-color:#ff00ff;
height:100px;
margin:auto;
clear:both;
}
