1、消除子元素浮动造成父元素高度折叠的影响
实例
<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
<!-- 实例演示如何消除子元素浮动造成父元素高度折叠的影响 -->
<!-- 方法1：将父元素的尺寸包起来子元素，就是父元素的高度>=子元素的高度 -->
<p>方法1：将父元素的尺寸包起来子元素，就是父元素的高度>=子元素的高度</p>
<style type="text/css">
.div1{ width: 200px; height: 150px; border: 1px solid red;}
.div2{ width: 200px; height: 150px; border: 1px solid blue; float: left;}
</style>
<div class="div1">
<div class="div2">
子元素(div2)
</div>
</div>
<div style="margin: 50px 0px;"></div>
<!-- 方法2：添加清除浮动元素块 -->
<p>方法2：添加清除浮动元素块</p>
<style type="text/css">
.div3{ width: 200px; border: 1px solid red;}
.div4{ width: 200px; height: 150px; border: 1px solid blue; float: left;}
.div5{ clear: both;}
</style>
<div class="div3">
<div class="div4">
子元素(div4)
</div>
<div class="div5"></div>
</div>
<div style="margin: 50px 0px;"></div>
<!-- 方法3：添加父级元素溢出 overflow：hidden -->
<p>方法3：添加父级元素溢出 overflow：hidden</p>
<style type="text/css">
.div6{ width: 200px; border: 1px solid red; }
.div7{ width: 200px; height: 150px; border: 1px solid blue; float: left;}
.div6{ overflow: hidden;}
</style>
<div class="div6">
<div class="div7">
子元素(div7)
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、三列布局的实现原理(浮动定位实现)
实例
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
.warp{ width: 1000px; margin: 0 auto;}
#header{ height: 150px; background: red;}
#footer{ height: 100px; background: #999;}
/*浮动定位*/
#content{ overflow: hidden;} /* 利用浮动对父元素的影响方式，简洁 */
#content .left{ width: 200px; background: #006400; height: 400px; float: left;}
#content .center{ width: 600px; background: #90EE90; height: 400px; float: left;}
#content .right{ width: 200px; background: #FF7F50; height: 400px;float: left;}
</style>
</head>
<body>
<div class="warp">
<div id="header">头部</div>
<div id="content">
<div class="left">左列</div>
<div class="center">中列</div>
<div class="right">右列</div>
</div>
<div id="footer">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、三列布局的实现原理(绝对定位实现)
实例
<!DOCTYPE html>
<html lang="zh">
<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>
<style type="text/css">
.warp{ width: 1000px; margin: 0 auto; color: #fff;}
#header{ height: 150px; background: red;}
#footer{ height: 100px; background: #999;}
/*绝对定位*/
#content{height:400px; position: relative;}
#content .left{ width: 200px; background: #006400; height: 400px; position: absolute; }
#content .center{ width: 600px; background: #90EE90; height: 400px; position: absolute; left: 200px; }
#content .right{ width: 200px; background: #FF7F50; height: 400px; position: absolute; left: 800px;}
</style>
</head>
<body>
<div class="warp">
<div id="header">头部</div>
<div id="content">
<div class="left">左列</div>
<div class="center">中列</div>
<div class="right">右列</div>
</div>
<div id="footer">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例