1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响
实例
<style>
.box1 {
width: 200px;
border: 5px dashed red;
/* 清楚浮动影响方法一加入OVERFLOW：hidden属性 */
/* overflow: hidden; */
/* 清楚浮动影响方法二加入高度200属性 */
/* height: 200px; */
/* 清楚浮动影响方法三也加入浮动属性 */
/* float: left; */
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.实例演示三列布局的实现原理(绝对定位)
实例
<style>
.head {
height: 50px;
width: 1000px;
background-color: lightblue;
margin-bottom: 20px;
}
.body {
min-height: 800px;
width: 1000px;
background-color: lightgreen;
position: relative;
}
.left {
min-height: 800px;
width: 200px;
background-color: lightcyan;
position: absolute;
left: 0;
}
.right {
min-height: 800px;
width: 200px;
background-color: lightcoral;
position: absolute;
right: 0;
}
.content {
height: 800px;
width: 600px;
background-color: lightpink;
position: absolute;
left: 200px;
}
.footer {
height: 50px;
width: 1000px;
background-color: lightskyblue;
margin-top: 20px;
}
</sthle>
<body>
<div class="head">头部</div>
<div class="body">
<div class="left">左侧</div>
<div class="content">内容</div>
<div class="right">右侧</div>
</div>
</div>
<div class="footer">底部</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.三列布局(浮动定位)
实例
<style>
.head {
height: 50px;
width: 1000px;
background-color: lightblue;
margin-bottom: 20px;
}
.body {
min-height: 800px;
width: 1000px;
background-color: lightgreen;
/* position: relative; */
overflow: hidden;
}
.left {
min-height: 800px;
width: 200px;
background-color: lightcyan;
/* position: absolute;
left: 0; */
float: left;
}
.right {
min-height: 800px;
width: 200px;
background-color: lightcoral;
/* position: absolute;
right: 0; */
float: right;
}
.content {
height: 800px;
width: 600px;
background-color: lightpink;
/* position: absolute;
left: 200px; */
float: left;
}
.footer {
height: 50px;
width: 1000px;
background-color: lightskyblue;
margin-top: 20px;
}
</style>
<body>
<div class="head">头部</div>
<div class="body">
<div class="left">左侧</div>
<div class="content">内容</div>
<div class="right">右侧</div>
</div>
</div>
<div class="footer">底部</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、浏览器中的元素按照标准流排列，就是从上到下，从右到左，也叫文档流；
2、CSS中的定位属性，可以让元素脱离文档流，定位包括了相对定位和绝对定位，区别是参照物不同；
3、相对定位是指相对该元素原来的位置来定位；
4、绝对定位是指相对于有定位属性的父元素来定位，若没有父元素或父元素没有定位属性，则以浏览器来定位；
5、CSS中的浮动属性，可以让元素在垂直方向上脱离文档流；
6、浮动的元素，形成了一个左右方向上的新的文档流；
7、浮动的元素对之前的元素没有影响，但会影响到之后的元素；
8、有父元素的子元素浮动之后，会让父元素的高度塌陷，有很多种办法可以解除这种塌陷，但现在主要是使用给父元素加上overflow:hidden属性；
9、浮动的元素完了之后，要在后面的元素上清除浮动。
