收藏
批改状态：合格
老师批语：总结的真, 最后二句话, 不做个三年前端, 体会不出来的
一、实例演示如何消除子元素浮动造成父元素高度折叠的影
a、有何影响
<style>
.box1{
width:100px;
border:3px solid red;
background-color:lightblue;
}
.box2{
width:inherit;
height:200px;
background-color:lightseagreen;
}
.box2{
float:left;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>点击 "运行实例" 按钮查看在线实例
影响：在父元素没有设置高度子元素也没有浮动时，子元素的高度会撑开父元素，使父元素与子元素高度相同，当子元素浮动后，子元素脱离了文档流，父元素高度没有了，无法包住子元素。
小 结：
当有块级元素嵌套，子元素浮动时，会造成父元素的高度无法自适应的包住子元素的高度，虽然可以采用设置父元素与子元素相同高度，或是父元素同子元素一起浮动，增加一个dom元素来清除等来消除，但都比较麻烦，如果子元素高度发生变化，又要调整父元素的高度，在父元素中增加overflow:hidden来清除浮动可以让父元素自适应子元素的高度，比较方便。
二、实例演示三列布局的实现原理
a、绝对定位
.container {
width: 1000px;
margin: 0 auto;
}
/*头部与底部共用样式*/
.header,
.footer {
height: 60px;
background-color: lightgrey;
}
/* 主体区与头部底部间隔5px */
.main {
margin: 5px auto;
}
/* 左边栏宽度，在没有内容时的最小高度及前景色 */
.left {
width: 150px;
min-height: 800px;
background-color: lightseagreen;
}
/* 内容区没有内容时的最小高度及前景色 */
.content {
min-height: 800px;
background-color: lightsalmon;
}
/* 右边栏宽度，最小高度及前景色 */
.right {
width: 150px;
min-height: 800px;
background-color: lightgreen;
}
/* 定义父级为相对定位 */
.main {
position: relative;
}
.left {
position: absolute;
left: 0px;
top: 0px;
}
.right {
position: absolute;
right: 0px;
top: 0px;
}
.content {
margin-left:0px 160px;
}点击 "运行实例" 按钮查看在线实例
小结：在本例中着重注意，子元素在绝对定位时，是根据父级元素的位置定们，所以要定位子元素，首先要定位好父级元素。
b、三列布局（浮动方式实现）
<style>
.container {
width: 1000px;
margin: 0 auto;
}
/*头部与底部共用样式*/
.header,
.footer {
height: 60px;
background-color: lightgrey;
}
/* 主体区与头部底部间隔5px */
.main {
margin: 5px auto;
}
/* 左边栏宽度，在没有内容时的最小高度及前景色 */
.left {
width: 150px;
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 150px;
min-height: 800px;
background-color: lightgreen;
}
/* 内容区没有内容时的最小高度及前景色 */
.content {
min-height: 800px;
background-color: lightsalmon;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="main">
<div class="content">内容区
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</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>点击 "运行实例" 按钮查看在线实例
小结：当几个元素一起浮动，浮动后的位置与它们浮动前的位置有关系
总结：在实际使用中，尽量使用定位，在定位无法达成效果时，才考虑用浮动。（切记：冲动是魔鬼，浮动也是魔鬼。）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
