Correction status:qualified
Teacher's comments:写得不错, 没写总结, 下次注意
一、实例演示如何消除子元素浮动造成父元素高度折叠的影响
父子级嵌套常见常用,若子元素是浮动元素,水平方向脱离了文档流,父元素无法包含子元素;
可通过几个方法解决:
1 给父级增加height属性
.box1 {
height: 300px;
}*/
但是只要子元素修改height,父级也需要跟着修改,麻烦。
2 给父级元素增加浮动属性
.box1 {
float: left;
} */
如果只有一个父级可以,但是如果上级还有几个父级元素,所有都需要增加,麻烦。
3 可增加清楚浮动
.clear {
clear: both;
} */
可能增加代码累赘
4 给父元素增加overflower属性,专门清楚浮动,推荐此方法。
<!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"> <title>Document</title> <style> .box1 { width: 400px; border: 5px solid red; } .box2 { width: inherit; height: 300px; background-color: aqua; float: left; } .box1 { overflow: hidden; } </style> </head> <body> <div class="box1"> <div class="box2"> 子块 </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
二、实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
1 绝对定位实现
相对定位是参照它在文档流中原来的位置
绝对定位,脱离文档流,必须要有参照物,默认body,如果定位父级就参考定位父级
定位属性:position,绝对定位值:absolute
<!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"> <title>Document</title> <style> .container { width: 1080px; margin: 0 auto; } .header, .footer { height: 60px; background-color: burlywood; } .main { background-color: lightgreen; margin: 5px auto; } .left { width: 200px; min-height: 800px; background-color: lightyellow; } .content { min-height: 800px; background-color: brown; } .right { width: 200px; min-height: 800px; background-color: lightyellow; } /*绝对定位*/ .main { /*给定位父级设置定位属性,对象不可层叠*/ position: relative; } .left { position: absolute; left: 0; top: 0; } .content { margin-left: 200px; } .right { position: absolute; right: 0; top: 0; } </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>
点击 "运行实例" 按钮查看在线实例
2 浮动定位实现
浮动,可用clear:both,清楚浮动;
但是使用overflow:hidden;可以清除浮动、解决外边距塌陷、溢出隐藏等
可以在父级增加此属性 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"> <title>Document</title> <style> .container { width: 1080px; margin: 0 auto; } .header, .footer { height: 60px; background-color: burlywood; } .main { background-color: lightgreen; margin: 5px auto; overflow: hidden; } .left { width: 200px; min-height: 800px; background-color: lightyellow; } .content { min-height: 800px; background-color: brown; } .right { width: 200px; min-height: 800px; background-color: lightyellow; } /*浮动*/ .left { float: left; } .content { float: left; width: 680px; } .right { float: right; } </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>
点击 "运行实例" 按钮查看在线实例