实例演示如何消除子元素浮动造成父元素高度折叠的影响
实例
<!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>1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响</title>
<style>
.parent {
background-color: aqua;
width: 300px;
border: 1px dashed blue;
/* position: absolute; */
/* height: 400px; */
/* float: left; */
overflow: hidden;
}
.son {
background-color: red;
width: 100px;
height: 200px;
float: left;
}
.clear {
clear: both;
}
p {
color: red;
font-size: 25px;
}
</style>
</head>
<body>
<p>方法1：给父级元素增加固定高度</p>
<p>方法2：父级元素跟随子集元素一起左浮动</p>
<p>方法3：给父级元素一个绝对定位</p>
<p>方法4：给父级元素一个特有属性overflow:hidden(推荐)</p>
<p>方法5：给子集平行加上一个盒子清除子集浮动影响</p>
<div class="parent">
<div class="son"></div>
<!-- <div class="clear"></div> -->
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、
1】浮动布局
实例
<!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>2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)</title>
<style>
.contain {
margin: auto 30px;
}
.header {
background-color: aqua;
height: 60px;
}
.main {
background-color: lightcoral;
/* height: 800px; */
margin: 5px auto;
}
.footer {
background-color: aqua;
height: 60px;
}
.main {
/* border: 1px solid red;s */
overflow: hidden;
}
.left {
background-color: red;
width: 20%;
min-height: 800px;
float: left;
}
.content {
background-color: yellow;
width: 60%;
min-height: 800px;
float: left;
}
.right {
background-color: blue;
width: 20%;
min-height: 800px;
float: left;
}
</style>
</head>
<body>
<div class="contain">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
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">
<title>2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)</title>
<style>
.contain {
margin: 0 auto;
}
.header {
background-color: aqua;
height: 60px;
}
.main {
background-color: lightcoral;
margin: 5px auto;
}
.footer {
background-color: aqua;
height: 60px;
}
.main {
position: relative;
}
.left {
background-color: red;
width: 20%;
min-height: 800px;
}
.content {
background-color: yellow;
width: 60%;
min-height: 800px;
}
.right {
background-color: blue;
width: 20%;
min-height: 800px;
}
.left {
position: absolute;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.content {
margin: 0px 20%;
}
</style>
</head>
<body>
<div class="contain">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
