收藏
批改状态：合格
老师批语：浮动一般是用来辅助布局, 主力工具还是定位
实例演示如何消除子元素浮动造成父元素高度折叠的影响
影响方式：
解决：box2浮动脱离文档流以后，用overflow:hidden解决最优
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style2.css"> <title>清除浮动的影响</title> </head> <body> <div class="box1"> <div class="box2">子元素（区块）</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
.box1 {
width: 300px;
border: 3px dashed red;
}
.box2 {
width: inherit; /*继承父元素的宽度*/
height: 300px;
background-color: aquamarine;
}
.box2 {
float: left;
}
/*box2浮动脱离文档流以后，用overflow:hidden解决最优*/
.box1 {
overflow: hidden;
}点击 "运行实例" 按钮查看在线实例
当box2进行浮动以后，会脱离文档流，父区块无法再包裹住子元素
解决方案有多种，比如：
1. 通过修改子元素和父元素的宽高来实现（但此方法不适合）
2. 父元素跟着子元素一起浮动（但是当出现更多层的嵌套的时候，会出现大量的浮动需求，这个方案也不适合）
3. 添加一个块元素，用于清浮动。<div class=”clear”></div>（此方案无兼容性问题，也比较常用，但是该方案又新增了一个元素，加载需要消耗时间，同时也会由于冗余给后端工程师造成工作量增加）
4. 给父元素添加overflow，专用来清浮动。(此方案简单，大多数浏览器均支持，推荐)
.box1 {
Overflow:hidden;
}
实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
绝对定位实现三列布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style8.css"> <title>三列布局之绝对定位</title> </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>
点击 "运行实例" 按钮查看在线实例
.container {
width: 1000px;
margin: 0 auto;
}
.header,.footer {
height: 60px;
background-color: aliceblue;
}
.main {
/*min-height: 800px;*/
background-color: bisque;
margin: 5px auto;
position: relative;
}
.left {
width: 200px;
min-height: 800px;
background-color: beige;
}
.content {
/*position: absolute;*/
min-height: 800px;
background-color: aquamarine;
}
.right {
width: 200px;
min-height: 800px;
background-color: lavenderblush;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
right: 0;
top: 0;
}
.content {
margin-left: 200px;
margin-right: 200px;
}点击 "运行实例" 按钮查看在线实例
浮动实现三列布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style9.css"> <title>三列布局之浮动</title> </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>
点击 "运行实例" 按钮查看在线实例
.container {
width: 1000px;
margin: 0 auto;
}
.header,.footer {
height: 60px;
background-color: aliceblue;
}
.main {
/*min-height: 800px;*/
background-color: bisque;
margin: 5px auto;
overflow: hidden; /*直接在主体使用overflow来解决浮动问题*/
}
.left {
width: 200px;
min-height: 800px;
background-color: beige;
}
.content {
/*position: absolute;*/
min-height: 800px;
background-color: aquamarine;
}
.right {
width: 200px;
min-height: 800px;
background-color: lavenderblush;
}
/*浮动*/
.left {
float: left;
}
.content {
float: left;
width: 600px;
}
.right {
float: right;
}点击 "运行实例" 按钮查看在线实例
总结：
overflow:hidden 清除浮动使用效果非常好，代码简洁，效果最好。
三列布局实现方式有：绝对定位，浮动。均可以实现，个人而言更喜欢浮动，简单很多。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
