收藏
批改状态：合格
老师批语：布局是一种艺术, 唯有多写多练
一.实例演示如何消除子元素浮动造成父元素高度折叠的影响！
我们下面用一个案例展示了当子元素设置浮动属性后，父元素因失去子元素支撑所产生的高度塌陷效果，因为在开发过程中，如果子级元素给了浮动属性，则该元素就脱离了文档流，但是父元素还在文档流中，所以父元素没有内容支撑，高度就会变为0。如以下代码所示：
<!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>
#id1 {
width: 400px;
border: 5px solid black;
}
#id2 {
width: inherit;
height: 400px;
background-color:blueviolet;
float: left;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">浮动元素</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
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>
<style>
#id1 {
width: 400px;
border: 5px solid black;
height: 400px;
}
#id2 {
width: inherit;
height: 400px;
background-color:blueviolet;
float: left;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">浮动元素</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
在上面的案例中我们发现我们解决了这种问题。可是当子元素的高度不是固定的，那你就不能靠固定设置父元素的高度来解决了，于是我们又可以用B方案，给父元素也设置浮动来解决，下面是演示的代码：
<!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>
#id1 {
width: 400px;
border: 5px solid black;
float: left;
}
#id2 {
width: inherit;
height: 400px;
background-color: blueviolet;
float: left;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">浮动元素</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
我们运行后看到也解决了这个问题。也不用担心子元素高度不固定的问题了。但是新的问题出来了。我们可以造成了父级的父级存在时。那他也会出现高度塌陷，我们又学习了一种新的处理方案。在当前元素下方加一个空白的盒子元素来清除浮动，具体代码演示如下：
<!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>
#id1 {
width: 400px;
border: 5px solid black;
}
#id2 {
width: inherit;
height: 400px;
background-color: blueviolet;
float: left;
}
#id3 {
clear: left;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">浮动元素</div>
<div id="id3"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
我们看到上面的方法也可以解决这个问题。但我们发现这样就多出一个空白元素。对于文档结构的渲染及后台的处理都不够友好，于是我们又学习到了通过设置父元素的overflow属性值为hidden来解决这个问题，如下案例所示：
<!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>
#id1 {
width: 400px;
border: 5px solid black;
overflow: hidden;
}
#id2 {
width: inherit;
height: 400px;
background-color: blueviolet;
float: left;
}
</style>
</head>
<body>
<div id="id1">
<div id="id2">浮动元素</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
我们发现上面这种解决方法是简便有效的。是基于文档结构的BFC原理，在开发中我们建议有这种方式来解决浮动给布局带来的影响；
二.实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
定位是指将网页元素在页面中重新排列，有如下四种定位：
静态定位：static,就是基于文档流的布局,流动布局；
相对定位：relative,是指元素仍在文档流中,只是相对原来的位置发生偏移；
绝对定位：absolute,元素脱离文档流,相对于与离他最近的,具有定位属性的父级元素作为基准点进行定位；
固定定位：fixed,始终相对于浏览器的窗口进行定位，基准点一般为body,html;
在网页开发的过程中，我们可以通过这些定位方式来很快速的布局,达到自己需要的信息展示效果；
下面展示使用绝对定位来实行常规的三列布局，案例如下：
<!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>
#container {
width: 1800px;
background-color: cadetblue;
}
#head,
#footer {
height: 100px;
background-color: darkgrey;
}
#main {
min-height: 600px;
background-color: burlywood;
position: relative;
/*给父元素一个定位属性，他下面的子元素就可以用绝对定位了。*/
}
#left {
min-height: 600px;
background-color: darkkhaki;
width: 200px;
position: absolute;
top: 0;
left: 0;
}
#content {
min-height: 600px;
background-color: lightgray;
margin: 0 200px;
/* 通过挤压放到中间 */
}
#right {
min-height: 600px;
background-color: lightblue;
width: 200px;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="head">头部</div>
<div id="main">
<div id="left">左侧</div>
<div id="content">内容</div>
<div id="right">右侧</div>
</div>
<div id="footer">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
下面展示使用浮动布局来实行常规的三列布局，案例如下：
<!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>
#container {
width: 1800px;
background-color: cadetblue;
}
#head,
#footer {
height: 100px;
background-color: darkgrey;
}
#main {
min-height: 600px;
background-color: burlywood;
overflow: hidden;
/*给父元素设置一下overflow属性值为hidden，他下面的子元素的浮动就不影响父元素及以上元素的布局了。*/
}
#left {
min-height: 600px;
background-color: darkkhaki;
width: 200px;
float: left;
}
#content {
min-height: 600px;
background-color: lightgray;
width: 1400px;
float: left;
}
#right {
min-height: 600px;
background-color: lightblue;
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="head">头部</div>
<div id="main">
<div id="left">左侧</div>
<div id="content">内容</div>
<div id="right">右侧</div>
</div>
<div id="footer">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
经过上面的两个案例。我们发现使用浮动跟绝对定位都可以达到相同的布局效果！网页上非常多漂亮的布局效果经过结构分析后。你都会发现这些布局方法的在其中的应用！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
