实例演示如何消除子元素浮动造成父元素高度折叠的影响
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动的影响</title> <link rel="stylesheet" href="style2.css"> </head> <body> <!-- <div class="wrap"></div> --> <div class="box1"> <div class="box2"> 子元素（区块） </div> <div class="clear"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1{
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2{
width: 150px;
height: 450px;
background-color: lightgreen;
}
.box1{
float: left;
}
.box2{
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: lightcoral;
float: right;
}
.box2{float: right;}
.box4{
height: 100px;
background-color: gray;
}
.box4{
clear:both;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
绝对定位实现三列布局
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="demo8.css"> <title>三列布局: 绝对定位</title> </head> <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> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*页面容器*/
.container{
width:1000px;
margin:0 auto;
}
/*头部与底部共用样式*/
.header,.footer{
height:100px;
background:lightgray;
}
/*主体*/
.main{
marign:5px auto;
background-color: lightblue;
}
/*主体三部分的基本样式*/
.left{
width:200px;
min-height: 800px;
background-color:lightgreen;
}
.content{
min-height:800px;
background-color:lightgreen;
}
.right{
width:200px;
min-height: 800px;
background-color:lightpink;
}
/* 绝对定位 */
/* 定位父级 */
.main{
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
}
.right{
position: absolute;
right:0;
top:0;
}
/* 用外边距margin,挤出中间内容区 */
.content{
margin-left:210px;
margin-right:210px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
浮动定位实现三列布局
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="demo9.css"> <title>浮动定位实现三列布局</title> </head> <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> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*页面容器*/
.container {
width: 1000px;
margin: 0 auto;
}
/*头部与底部共用样式*/
.header, .footer {
height: 120px;
background-color: lightblue;
}
.main{
margin: 5px auto;
background-color: lightblue;
}
/*主体三部分的基本样式*/
.left {
width: 200px;
min-height: 800px;
background-color: lightcoral;
}
.content {
/*内容区宽度自适应*/
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightpink;
}
/*左侧左浮动*/
.left {
float: left;
}
/*右侧右浮动*/
.right {
float: right;
}
/*内容区设置*/
.content {
float: left;
width: 580px;
margin-left: 10px;
}
/*清除子元素浮动影响*/
.main {
overflow: hidden;
}运行实例 »
点击 "运行实例" 按钮查看在线实例