实例演示如何消除子元素浮动造成父元素高度折叠的影响
实例
<head>
<meta charset="UTF-8">
<title>清除浮动的影响</title>
<style>
/* 父块包含字块 */
.box1 {
width: 300px;
border: 5px dashed red;
}
.box2 {
width: inherit;
height: 300px;
background-color: lightpink;
}
/* 父块包含字块 END*/
/* 子元素块浮动后，父元素块无法继续包含字块 */
.box2 {
float: left;
}
/* 最优处理 给父元素添加overflow:hidden*/
.box1 {
overflow: hidden;
}
</style>
</head>
<body>
<!-- 定位父BOX1，子BOX2 -->
<div class="box1">
<div class="box2">
子元素块
</div>
</div>
<body>运行实例 »
清楚浮动的几种方式分析
A， 解决方案1：父元素设置与子元素一样的高度
.box1 {
height: 300px;
}
.box2{
height: 300px;
}
缺点：要一直找他的父级元素和父级的父级元素，并定义高度
B. 解决方案2：父元素设置与子元素一样浮动
.box1 {
float: left;
}
缺点：同A，要一直找他的父级元素和父级的父级元素，并定义浮动
C. 解决方案3：在浮动元素下面定义个添加个块元素clear，并增加清楚浮动属性
.clear {
clear: both;
}
缺点：代码冗余，容易给后台造成误解，以前的老方法
D.最优解决方案，给父元素添加overflow:hidden属性
原理：当给.parent设置"overflow:hidden"时，实际上创建了一个超级属性BFC，此超级属性反过来决定了"height:auto"是如何计算的，在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素
另外，上节课提到的margin的嵌套传递，也可以通过overflow:hidden解决。
2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
绝对定位实现三列布局
实例
<head>
<meta charset="UTF-8">
<style>
.container {
width: 1000px;
margin: 0 auto;
}
.header,
.footer {
height: 60px;
background-color: lightgray;
}
.main {
min-height: 800px;
background-color: lightblue;
margin: 5px auto;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightseagreen;
}
.content {
min-height: 800px;
background-color: chartreuse;
}
.right {
width: 200px;
min-height: 800px;
background-color: rgb(23, 85, 82);
}
/* 绝对定位 */
.main {
/* 给定位父级设置定位属性 */
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
right: 0;
top: 0;
}
.content {
margin: 0 200px;
}
</style>
<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>
</body>浮动定位实现三列布局
实例
<head>
<meta charset="UTF-8">
<style>
.container {
width: 1000px;
margin: 0 auto;
}
.header,
.footer {
height: 60px;
background-color: lightgray;
}
.main {
/* min-height: 800px; */
background-color: lightblue;
margin: 5px auto;
overflow: hidden;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightseagreen;
}
.content {
min-height: 800px;
background-color: chartreuse;
}
.right {
width: 200px;
min-height: 800px;
background-color: rgb(23, 85, 82);
}
/* 浮动 */
.left {
float: left;
}
.right {
float: right;
}
.content {
float: left;
width: 600px;
}
</style>
<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>
</body>运行实例 »