9月4日作业:
1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响
2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
1. 演示如何消除子元素浮动造成父元素高度折叠的影响
div容器中放置三个div子元素，这三个子元素设置为浮动后，它们将脱离流文档流，可以在水平方向上移动，但其父元素没有了包容高度，产生高度折叠。代码及运行示意如下：
实例1: <body> <div class="box1"> <div class="box2">box1</div> <div class="box3">box2</div> <div class="box4">box3</div> </div> </body> 运行实例 » 点击 "运行实例" 按钮查看在线实例
实例1--CSS样式表
div>div {
width: 100px;
height: 100px;
float: left;
}
.box1 { width: 300px;
border: 5px dashed red;
/* overflow: hidden; */}
.box2 { background-color: lightblue;}
.box3 { background-color: lightcoral;}
.box4 { background-color: lightsteelblue;}
运行实例 »
点击 "运行实例" 按钮查看在线实例父元素的高度折叠现象如图1示：父元素增加“overflow: hidden;
”后，可恢复正常显示。
2. 演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
HTML代码结构为：.container>.header+.footer+.main>.left+.content+.right
实例 <body> <div class="container"> <div class="header">头部</div> <div class="main"> <div class="left">左边栏</div> <div class="content">内容</div> <div class="right">右边栏</div> </div> <div class="footer">底部</div> </div> </body> 运行实例 » 点击 "运行实例" 按钮查看在线实例
首先利用浮动定位实现：
.left 和 ,.content设置为：float:left; .right设置为float:right;
此时.main父元素发生高度塌陷，使得后面的.footer底栏随着上移，所以需在.main中增加：overflow:hiden;消除这种错位。
浮动定位的css样式表：
实例----通过浮动定位实现
.container {
width: 1200px;
margin: 0 auto;
}
.header {
background-color: #111;
height: 80px;
}
.footer {
background-color: #333;
height: 40px;
}
.main {
background-color: lightseagreen;
margin: 5px auto;
overflow: hidden;
}
.left,
.right {
width: 200px;
min-height: 750px;
background-color: lightsalmon;
}
.left { float: left;}
.right {float: right;}
.content {
min-height: 750px;
background-color: lightgoldenrodyellow;
float: left;
width: 780px;
margin: 0 10px;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例通过绝对定位也可实现上述布局：
实例----通过绝对定位实现
.container {
width: 1200px;
margin: 0 auto;
}
.header {
background-color: #111;
height: 80px;
}
.footer {
background-color: #333;
height: 40px;
}
.main {
background-color: lightseagreen;
margin: 5px auto;
position: relative;
/* overflow: hidden; */
}
.left, .right {
width: 200px;
min-height: 750px;
background-color: lightsalmon;
position: absolute;
}
.right {
right: 0;
top: 0;
}
.content {
min-height: 750px;
background-color: lightgoldenrodyellow;
width: 780px;
margin: 0 210px;
/* margin-left: 205px;
margin-right: 205px; */
}
运行实例 »
点击 "运行实例" 按钮查看在线实例使用绝对定位需要为.main父元素设置为positin:relative;因为
脱离文档流的元素做绝对定位时，必须要找到一个最近的，可定位的父级元素来参照定位。
两种定位方式的运行结果一致：
