在实际的网页开发中，网页的整体部分一般是由div标签来进行布局的。那么在使用div布局之前就要了解div的属性
div是块级元素 块级元素在页面中的独占一行 默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div和div之间是上下排列的
还有块级元素之间不仅能套入行内元素 还可以嵌入块级元素 但在嵌入块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使用浮动
如图所示，该页面的整体结构的搭建是使用div搭建的。主要有一个大的整体的div 然后这个最大的div下有三个小的div 分别是头部 中部 底部 而在中部的div中还有三个小div
<!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 type="text/css">
.container{
width: 1000px;
height: 880px;
border: 1px solid red;
margin: 0px auto;
background-color: rgb(233, 213, 213);
}
/* 设置头部样式 */
.title{
width: 950px;
height: 100px;
border: 1px solid red;
margin: 10px auto;
background-color: pink;
}
/* 设置导航样式 */
.nav{
width: 950px;
height: 120px;
margin: 10px auto;
background-color: red;
}
/* 设置主体内容样式 */
.content{
height: 500px;
width: 950px;
background-color: lightblue;
margin: 10px auto;
}
/* 设置主体内容左列的样式 */
.content .demo1{
width: 200px;
height: 100%;
/*高度设置为100%的时候表示占满容器 那么后期就无法设置该盒子的上外边距和下外边距
但是可以设置px为单位作高度 只要不把父容器占满即可
*/
background-color: yellow;
margin-right: 20px;
float: left;
}
/* 设置主体内容的中间的内容的样式 */
.content .demo2{
width: 400px;
height: 100%;
background-color: lightcoral;
float: left;
margin-right: 20px;
}
/* 设置主体内容右列的样式 */
.content .demo3{
width: 310px;
height: 100%;
background-color: lightgreen;
float: right;
}
/* 设置底部 */
.bottom{
width: 950px;
height: 100px;
background-color: lightslategray;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="title">这是头部</div>
<div class="nav">这是导航</div>
<div class="content">
<div class="demo1">主体内容的左列</div>
<div class="demo2">主体内容的中间内容</div>
<div class="demo3">主体内容的右列</div>
</div>
<div class="bottom">这是底部</div>
</div>
</body>
</html>
最终代码如上所示，在实际搭建下，除了中间的div的搭建需要用到浮动，其它的div只要定义了宽高，然后使用margin: 0px auto;即可实现在整个父级元素内水平居中显示
中部的三个小div的则需要使用float的浮动去实现，
/* 设置主体内容样式 */
.content{
height: 500px;
width: 950px;
background-color: lightblue;
margin: 10px auto;
}
/* 设置主体内容左列的样式 */
.content .demo1{
width: 200px;
height: 100%;
/*高度设置为100%的时候表示占满容器 那么后期就无法设置该盒子的上外边距和下外边距
但是可以设置px为单位作高度 只要不把父容器占满即可
*/
background-color: yellow;
margin-right: 20px;
float: left;
}
/* 设置主体内容的中间的内容的样式 */
.content .demo2{
width: 400px;
height: 100%;
background-color: lightcoral;
float: left;
margin-right: 20px;
}
/* 设置主体内容右列的样式 */
.content .demo3{
width: 310px;
height: 100%;
background-color: lightgreen;
float: right;
}如上所示，中部内容三个小div需要用到浮动，以为块级元素之间的默认排序是上下方向的排序。而在最终的效果图中都是在同一行内排序，所以这里可以使用左浮动来实现 给三个div分别使用float： left；方法即可。因为使用浮动就会存在浮动塌陷，所以需要消除浮动塌陷
消除浮动塌陷的三种方法
1.给父级元素定义高度
2.给父级元素使用overflow: hidden;方法消除浮动塌陷
3.使用clear: both;方法消除浮动塌陷
我们这里使用消除浮动塌陷的方法是给父级元素添加高度值 所以在对子级元素使用浮动的时候就不会出现浮动塌陷
像这种情况多个小div在一个大div呈一行排序的情况一般使用的都是左浮动 如果最后一个元素即使使用了左浮动但是依然在下面 那么可以给它尝试使用一下右浮动 使它靠右浮动即可实现