收藏
批改状态：合格
老师批语：你用的编辑器, 应该是HBX, 作业写得不错, 加油
如何消除子元素浮动造成父元素高度折叠的影响
为什么要清浮动?
当有嵌套关系的元素时, 父元素的高度应该由子元素撑开
元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住
浮动情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清浮动的方式</title>
<style type="text/css">
.box1 {
width: 300px;
border: 5px dashed red;
/*父级元素的宽为300px，高度应该由子元素撑开，设置了边框*/
}
.box2 {
/*width: inherit;*/
width: 200px;
height:300px;
background-color: lightblue;
/*设置子元素，的大小及背景，这里特意将宽度设置小*/
}
/*浮动后脱离文档流, 父区块无法再包裹住*/
.box2 {
float: right;
/*让其向右浮动，会发现子元素向右浮动到父级元素的最右侧*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!--<div class="clear"></div>-->
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
注意：将子元素的宽度缩小，让其向右浮动，会发现子元素向右浮动到父级元素的最右侧
四种解决方案：
解决方案1: 父元素设置与子元素一样的高度
.box1 {height: 300px;}
在上述运行实例的style中添加以上代码，为父元素设置与子元素一样的高度，但是该方案非常Low,如果子元素高度变化,则必须同步修改父元素高度
解决方案2: 父元素跟着子元素一起浮动
.box1 {float: right;}
在上述运行实例的style中添加以上代码，float可以向左也可以向右，向右时父级块向页面最右侧，子元素在父级块的最右侧，但是这个方案也是有问题的, 如果box1还有父元素, 那么也要添加float,一级一级往上走。
解决方案3: 添加一个块元素,专用来清浮动
style： .clear {clear: both;}
新建一个与.box2同级的div：<div class="clear"></div>
在上述运行实例的style中添加以上代码，专门添加清除浮动的div简单粗暴,但会多增加一个dom元素, 在服务器端渲染页面时, 会遇到些麻烦。
解决方案4: 父元素添加overflower,专用来清浮动
.box1 {overflow: hidden;}
在上述运行实例的style中添加以上代码，仅父元素添加overflower,专用来清浮动。显然第4种方案最简单,一般使用第四种。
三列布局的实现原理
布局常识
大多数页面, 头部和底部都是公用的, 变化的是主体部分
主体部分主要有单列布局,二列布局, 三列布局,以及多列布局
下面以最常用的三列布局为例介绍,其它布局只是在它基础之上的增删而已
通用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
/*页面容器*/
.container {
width: 1000px;
/*整个页面的宽度设置固定值1000px，上下外边距为0，左右为auto即居中*/
margin: 0 auto;
}
/*头部与底部共用样式*/
.header, .footer {
height: 60px;
background-color: lightgrey;
}
.main {
/*min-height: 800px;*/ /*不设置高度由内容撑开*/
margin: 5px auto;
background-color: lightblue;
}
</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>点击 "运行实例" 按钮查看在线实例
中间主体部分的分栏实现方式
.left {
width: 200px;
/*设置最小高度,可以确保在没有内容的情况下,仍能显示出高度来*/
min-height: 800px;
background-color: lightgreen;
}
.content {
/*内容区宽度自适应*/
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightpink;
}
添加如上代码到style，设置主体部分的三个块
第一个：宽200px，最低高800px
第二个：自适应宽度，最低高800px
第三个：宽200px，最低高800px
方案1: 绝对定位
/*定位父级*/
.main {
position: relative;
/*相对定位父级元素*/
}
.left {
position: absolute;
/*绝对定位第一个元素*/
left: 0;
top: 0;
}
.right {
position: absolute;
/*绝对定位第三个元素*/
right: 0;
top: 0;
}
/*用外边距margin,挤出中间内容区*/
.content {
margin-left: 210px;
margin-right: 210px;
}
添加如上代码到style，注意注释。
方案2: 浮动定位
/*左侧左浮动*/
.left {
float: left;
/*第一个元素向左浮动*/
}
/*右侧右浮动*/
.right {
float: right;
/*第三个元素向右浮动*/
}
/*内容区设置*/
.content {
float: left;
/*第二个元素向左浮动*/
/*如果width过大，右侧的元素将被挤到下一行*/
width: 580px;
margin-left: 10px;
/*左侧的外边距为10px时，200+10+580+右侧的200差10正好为第二三个元素的间距*/
}
/*清除子元素浮动影响*/
.main {
overflow: hidden;
}
添加如上代码到style，注意注释。
总结：
这是关于相对定位和绝对定位的测试总结
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
