收藏
批改状态：合格
老师批语：看来你对我课堂上说得话, 听得非常认真, 我打个比方, 你都记住了
子元素浮动造成父元素高度折叠的影响
<!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">
<style>
.wrap {
width: 1000px;
border: 3px solid red;
}
.box {
width: 800px;
background-color: lightslategray;
height: 580px;
float: left;
}
.up {
width: 300px;
height: 300px;
background-color: cyan;
float: left;
opacity: 0.7;
}
.down {
width: 200px;
height: 400px;
background-color: magenta;
float: left;
}
.left {
width: 500px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.right {
width: 600px;
height: 80px;
background-color: khaki;
float: left;
}
.box1 {
clear: both;
width: 500px;
height: 100px;
border: 2px solid blue;
}
</style>
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="up">up</div>
<div class="down">down</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
可以看到结果 元素浮动后脱离了文档流 ，所有的元素都挤到了一起，使父级元素的高度折叠，
解决办法，
重新设置父级元素的高度；但是有一定的局限性，子元素有变动而父元素的高度都要相对改变，不可取
所有父级元素跟随子元素一样浮动；如果有多个盒子嵌套，那么所有的盒子都要浮动，不可取
在子元素的下面再次添加一个空子元素，使用“clear：both；”来清楚子元素浮动对父级的影响；此方法属于额外的添加元素，会增加后期的工作量，不推荐
在父级添加“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">
<style>
.wrap {
width: 1000px;
border: 5px solid red;
/* height: 600px; */
/* float: left; */
overflow: hidden;
}
.box {
width: 800px;
background-color: lightslategray;
height: 580px;
float: left;
}
.up {
width: 300px;
height: 300px;
background-color: cyan;
float: left;
opacity: 0.7;
}
.down {
width: 200px;
height: 400px;
background-color: magenta;
float: left;
}
.left {
width: 500px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.right {
width: 600px;
height: 80px;
background-color: khaki;
float: left;
}
.box1 {
clear: both;
width: 500px;
height: 100px;
border: 2px solid blue;
}
/* .clear {
clear: both;
} */
</style>
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="box">子元素
<div class="up">up</div>
<div class="down">down</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<!-- <dir class="clear"></dir> -->
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
--------------------------------------------------------------------
三列布局的实现原理
绝对定位
以父级位参照实施决对定位
<!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">
<style>
.container {
width: 1100px;
margin: 0 auto;
}
.header,
.footer {
min-height: 40px;
background-color: lightblue;
}
.body {
position: relative;
margin: 0 auto;
}
.left {
width: 200px;
min-height: 800px;
background-color: rgb(168, 201, 212);
position: absolute;
left: 0;
top: 0;
}
.right {
width: 240px;
min-height: 800px;
background-color: rgb(168, 201, 212);
position: absolute;
right: 0;
top: 0;
}
.center {
min-height: 800px;
background-color: rgb(117, 123, 126);
/* position: absolute; */
margin-left: 200px;
margin-right: 240px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="body">
<div class="left">左侧</div>
<div class="center">中间内容</div>
<div class="right">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
浮动定位
利用在父级元素上清浮动的效果来实现
<!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">
<style>
.container {
width: 1100px;
margin: 0 auto;
}
.header,
.footer {
min-height: 40px;
background-color: lightblue;
}
.body {
/* position: relative; */
margin: 4px auto;
overflow: hidden;
}
.left {
width: 200px;
min-height: 800px;
background-color: rgb(168, 201, 212);
/* position: absolute; */
float: left;
margin-right: 5px;
}
.right {
width: 240px;
min-height: 800px;
background-color: rgb(168, 201, 212);
/* position: absolute; */
float: left;
margin-left: 5px;
}
.center {
min-height: 800px;
background-color: rgb(117, 123, 126);
/* position: absolute; */
/* margin-left: 200px;
margin-right: 240px; */
float: left;
width: 650px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="body">
<div class="left">左侧</div>
<div class="center">中间内容</div>
<div class="right">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
浮动
一、文档流：html元素按书写顺序进行排列，从坐到右，从上到下，也加标准流
CSS两大功能：1：控制元素的外观；2：控制元素的位置（布局）
二、布局前提：浏览器交出页面布局的权限，交给用户，（将元素从文档流中脱离出来）
三、脱离文档流的手段：浮动，决定对位
四、浮动可以将元素在水平方向上自由移动，垂直方向不变
绝对定位：如果子元素没有父元素，那将对body定位，如果子元素上面有父元素，父元素设置relative，这时子元素将相对
父元素进行定位。
浮动定位：块元素如果不指定宽度的话，默认是100%，当div浮动起来宽度就会随着内容自适应，所有要给浮动的元素设定宽度，还要在父元素上使用overflow:hidden。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
