子元素浮动造成父元素高度折叠的影响
实例
<!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">
<style>
.wrap {
width: 1000px;
border: 3px solid red;
}
.box {
width: 800px;
background-color: lightslategray;
height: 580px;
float: left;
}
.up {
width: 300px;
height: 300px;
background-color: cyan;
float: left;
opacity: 0.7;
}
.down {
width: 200px;
height: 400px;
background-color: magenta;
float: left;
}
.left {
width: 500px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.right {
width: 600px;
height: 80px;
background-color: khaki;
float: left;
}
.box1 {
clear: both;
width: 500px;
height: 100px;
border: 2px solid blue;
}
</style>
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="up">up</div>
<div class="down">down</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
可以看到结果 元素浮动后脱离了文档流 ，所有的元素都挤到了一起，使父级元素的高度折叠，
解决办法，
重新设置父级元素的高度；但是有一定的局限性，子元素有变动而父元素的高度都要相对改变，不可取
所有父级元素跟随子元素一样浮动；如果有多个盒子嵌套，那么所有的盒子都要浮动，不可取
在子元素的下面再次添加一个空子元素，使用“clear：both；”来清楚子元素浮动对父级的影响；此方法属于额外的添加元素，会增加后期的工作量，不推荐
在父级添加“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"> <style> .wrap { width: 1000px; border: 5px solid red; /* height: 600px; */ /* float: left; */ overflow: hidden; } .box { width: 800px; background-color: lightslategray; height: 580px; float: left; } .up { width: 300px; height: 300px; background-color: cyan; float: left; opacity: 0.7; } .down { width: 200px; height: 400px; background-color: magenta; float: left; } .left { width: 500px; height: 100px; background-color: yellowgreen; float: left; } .right { width: 600px; height: 80px; background-color: khaki; float: left; } .box1 { clear: both; width: 500px; height: 100px; border: 2px solid blue; } /* .clear { clear: both; } */ </style> <title>Document</title> </head> <body> <div class="wrap"> <div class="box">子元素 <div class="up">up</div> <div class="down">down</div> <div class="left">left</div> <div class="right">right</div> </div> <!-- <dir class="clear"></dir> --> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
--------------------------------------------------------------------
三列布局的实现原理
绝对定位
以父级位参照实施决对定位
实例
<!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"> <style> .container { width: 1100px; margin: 0 auto; } .header, .footer { min-height: 40px; background-color: lightblue; } .body { position: relative; margin: 0 auto; } .left { width: 200px; min-height: 800px; background-color: rgb(168, 201, 212); position: absolute; left: 0; top: 0; } .right { width: 240px; min-height: 800px; background-color: rgb(168, 201, 212); position: absolute; right: 0; top: 0; } .center { min-height: 800px; background-color: rgb(117, 123, 126); /* position: absolute; */ margin-left: 200px; margin-right: 240px; } </style> <title>Document</title> </head> <body> <div class="container"> <div class="header">头部</div> <div class="body"> <div class="left">左侧</div> <div class="center">中间内容</div> <div class="right">右侧</div> </div> <div class="footer">底部</div> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
浮动定位
利用在父级元素上清浮动的效果来实现
实例
<!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"> <style> .container { width: 1100px; margin: 0 auto; } .header, .footer { min-height: 40px; background-color: lightblue; } .body { /* position: relative; */ margin: 4px auto; overflow: hidden; } .left { width: 200px; min-height: 800px; background-color: rgb(168, 201, 212); /* position: absolute; */ float: left; margin-right: 5px; } .right { width: 240px; min-height: 800px; background-color: rgb(168, 201, 212); /* position: absolute; */ float: left; margin-left: 5px; } .center { min-height: 800px; background-color: rgb(117, 123, 126); /* position: absolute; */ /* margin-left: 200px; margin-right: 240px; */ float: left; width: 650px; } </style> <title>Document</title> </head> <body> <div class="container"> <div class="header">头部</div> <div class="body"> <div class="left">左侧</div> <div class="center">中间内容</div> <div class="right">右侧</div> </div> <div class="footer">底部</div> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
总结：
浮动
一、文档流：html元素按书写顺序进行排列，从坐到右，从上到下，也加标准流
CSS两大功能：1：控制元素的外观；2：控制元素的位置（布局）
二、布局前提：浏览器交出页面布局的权限，交给用户，（将元素从文档流中脱离出来）
三、脱离文档流的手段：浮动，决定对位
四、浮动可以将元素在水平方向上自由移动，垂直方向不变
绝对定位：如果子元素没有父元素，那将对body定位，如果子元素上面有父元素，父元素设置relative，这时子元素将相对
父元素进行定位。
浮动定位：块元素如果不指定宽度的话，默认是100%，当div浮动起来宽度就会随着内容自适应，所有要给浮动的元素设定宽度，还要在父元素上使用overflow:hidden。
