![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：定位其实才是真正的布局工具, 浮动应该是辅助才对, 但现在却并非如此, 浮动被滥用
Collection
Collection
如何消除子元素浮动造成父元素高度折叠的影响
html文件
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="static/css/index1.css"> <title>浮动float</title> </head> <body> <h1>float浮动</h1> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
css代码
实例
.box1 { width: 150px; height: 150px; background-color: lightblue; float: left; } .box2 { width: 150px; height: 150px; background-color: lightgreen; float: right; } .box3 { width: 200px; height: 200px; background-color: lightcoral; float: right; } .box4 { height: 100px; background-color: gray; clear: both; /*clear: left;*/ /*clear: right;*/ }
运行实例 »点击 "运行实例" 按钮查看在线实例
总结
消除子元素的浮动对父元素的影响：
1、设置设置父元素和子元素一样的宽高，子元素浮动，父元素会缩成一团，设置一定的宽高可以看起来是父元素仍然包裹着子元素
2、将父元素也浮动起来，但是会影响父元素的父元素，嵌套传递，都需要添加浮动
3、在最后一个子元素后面添加一个div块元素，添加属性clear:both可以消除，但是不方便后端传输数据对前端界面进行渲染
4、给父元素添加overflow:hidden属性，消除子元素的浮动对父元素的影响
个人理解
浮动相当于将元素从文档流界面提出来，前端两层界面
1这样设置只是在视觉效果上父元素包裹着子元素，其实是在两层界面中
2则是将父元素也提出到上层界面（递归处理）
3和4相当于将上层界面的元素再按回下层界面，前端还是一层界面
三列布局的实现原理( 绝对定位实现, 浮动定位实现)
定位：
1、静态定位：static，文档流定位，流动布局
2、相对定位：relative，元素仍在文档流中，只是相对它原来的位置发生偏移，站着位置，只是在视觉效果上偏移
3、绝对定位：absolute，元素脱离文档流，相对离他最近的，具有定位属性的父级元素进行定位
4、固定定位：fixed，始终相对于浏览器的窗口进行定位 body/html
html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="static/css/index6.css"> <title>布局常识与三列布局</title> </head> <body> <div class="container"> <div class="header">头部</div> <div class="main"> <div class="left">left</div> <div class="content">content</div> <div class="right">right</div> </div> <div class="footer">底部</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
绝对定位实现三列布局CSS代码
.container {
width: 1000px;
margin: 0 auto;
}
.header,.footer {
height: 60px;
background-color: lightgray;
}
.main {
background-color: lightseagreen;
margin: 5px auto;
/*给定位父级设置定位属性*/
position: relative;
}
.left {
width: 200px;
min-height: 600px;
background-color: lightblue;
position: absolute;
left: 0;
top: 0;
}
.content {
min-height: 600px;
background-color: lightcoral;
/*内容区通过margin挤压*/
margin-left: 200px;
margin-right: 200px;
}
.right {
width: 200px;
min-height: 600px;
background-color: coral;
position: absolute;
right: 0;
top: 0;
}点击 "运行实例" 按钮查看在线实例
绝对定位左右边栏的位置在靠着和靠右，然后使用margin将左右边栏的宽度挤压出内容区
浮动实现三列布局CSS代码
.container {
width: 1000px;
margin: 0 auto;
}
.header,.footer {
height: 60px;
background-color: lightgray;
}
.main {
background-color: lightseagreen;
margin: 5px auto;
overflow: hidden;
}
.left {
width: 200px;
min-height: 600px;
background-color: lightblue;
float: left;
}
.content {
min-height: 600px;
background-color: lightcoral;
width: 600px;
float: left;
}
.right {
width: 200px;
min-height: 600px;
background-color: coral;
float: right;
}点击 "运行实例" 按钮查看在线实例
浮动每个块的位置，清除块级元素的换行，然后将元素放在一行，需要计算每个块的占据宽度的比例
两种方法好像都挺简单的
ps. 练习绝对定位之遮罩的时候，使用fixed定位一个窗口，选用的是一张图片，后来img的父级元素比img元素设置的高度多了4px，，，未找到为什么
解决办法：img添加display:block
或者img的父元素添加font-size:0
或者父级元素添加display:inline-flex