一、实例演示如何消除子元素浮动造成父元素高度折叠的影响
父子级嵌套常见常用，若子元素是浮动元素，水平方向脱离了文档流，父元素无法包含子元素；
可通过几个方法解决：
1 给父级增加height属性
.box1 {
height: 300px;
}*/
但是只要子元素修改height，父级也需要跟着修改，麻烦。
2 给父级元素增加浮动属性
.box1 {
float: left;
} */
如果只有一个父级可以，但是如果上级还有几个父级元素，所有都需要增加，麻烦。
3 可增加清楚浮动
.clear {
clear: both;
} */
可能增加代码累赘
4 给父元素增加overflower属性，专门清楚浮动，推荐此方法。
实例
<!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>Document</title>
<style>
.box1 {
width: 400px;
border: 5px solid red;
}
.box2 {
width: inherit;
height: 300px;
background-color: aqua;
float: left;
}
.box1 {
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
子块
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
1 绝对定位实现
相对定位是参照它在文档流中原来的位置
绝对定位，脱离文档流，必须要有参照物，默认body，如果定位父级就参考定位父级
定位属性：position，绝对定位值：absolute
实例
<!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>Document</title>
<style>
.container {
width: 1080px;
margin: 0 auto;
}
.header,
.footer {
height: 60px;
background-color: burlywood;
}
.main {
background-color: lightgreen;
margin: 5px auto;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightyellow;
}
.content {
min-height: 800px;
background-color: brown;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightyellow;
}
/*绝对定位*/
.main {
/*给定位父级设置定位属性，对象不可层叠*/
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.content {
margin-left: 200px;
}
.right {
position: absolute;
right: 0;
top: 0;
}
</style>
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
2 浮动定位实现
浮动，可用clear:both，清楚浮动；
但是使用overflow:hidden；可以清除浮动、解决外边距塌陷、溢出隐藏等
可以在父级增加此属性 overflow:hidden；
实例
<!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>Document</title>
<style>
.container {
width: 1080px;
margin: 0 auto;
}
.header,
.footer {
height: 60px;
background-color: burlywood;
}
.main {
background-color: lightgreen;
margin: 5px auto;
overflow: hidden;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightyellow;
}
.content {
min-height: 800px;
background-color: brown;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightyellow;
}
/*浮动*/
.left {
float: left;
}
.content {
float: left;
width: 680px;
}
.right {
float: right;
}
</style>
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例