如何消除子元素浮动造成父元素高度折叠的影响
为什么要清浮动?
当有嵌套关系的元素时, 父元素的高度应该由子元素撑开
元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住
浮动情况:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清浮动的方式</title> <style type="text/css"> .box1 { width: 300px; border: 5px dashed red; /*父级元素的宽为300px,高度应该由子元素撑开,设置了边框*/ } .box2 { /*width: inherit;*/ width: 200px; height:300px; background-color: lightblue; /*设置子元素,的大小及背景,这里特意将宽度设置小*/ } /*浮动后脱离文档流, 父区块无法再包裹住*/ .box2 { float: right; /*让其向右浮动,会发现子元素向右浮动到父级元素的最右侧*/ } </style> </head> <body> <div class="box1"> <div class="box2"></div> <!--<div class="clear"></div>--> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
注意:将子元素的宽度缩小,让其向右浮动,会发现子元素向右浮动到父级元素的最右侧
四种解决方案:
解决方案1: 父元素设置与子元素一样的高度
.box1 {height: 300px;}
在上述运行实例的style中添加以上代码,为父元素设置与子元素一样的高度,但是该方案非常Low,如果子元素高度变化,则必须同步修改父元素高度
解决方案2: 父元素跟着子元素一起浮动
.box1 {float: right;}
在上述运行实例的style中添加以上代码,float可以向左也可以向右,向右时父级块向页面最右侧,子元素在父级块的最右侧,但是这个方案也是有问题的, 如果box1还有父元素, 那么也要添加float,一级一级往上走。
解决方案3: 添加一个块元素,专用来清浮动
style: .clear {clear: both;}
新建一个与.box2同级的div:<div class="clear"></div>
在上述运行实例的style中添加以上代码,专门添加清除浮动的div简单粗暴,但会多增加一个dom元素, 在服务器端渲染页面时, 会遇到些麻烦。
解决方案4: 父元素添加overflower,专用来清浮动
.box1 {overflow: hidden;}
在上述运行实例的style中添加以上代码,仅父元素添加overflower,专用来清浮动。显然第4种方案最简单,一般使用第四种。
三列布局的实现原理
布局常识
大多数页面, 头部和底部都是公用的, 变化的是主体部分
主体部分主要有单列布局,二列布局, 三列布局,以及多列布局
下面以最常用的三列布局为例介绍,其它布局只是在它基础之上的增删而已
通用:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列布局</title> <style> /*页面容器*/ .container { width: 1000px; /*整个页面的宽度设置固定值1000px,上下外边距为0,左右为auto即居中*/ margin: 0 auto; } /*头部与底部共用样式*/ .header, .footer { height: 60px; background-color: lightgrey; } .main { /*min-height: 800px;*/ /*不设置高度由内容撑开*/ margin: 5px auto; background-color: lightblue; } </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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
中间主体部分的分栏实现方式
.left {
width: 200px;
/*设置最小高度,可以确保在没有内容的情况下,仍能显示出高度来*/
min-height: 800px;
background-color: lightgreen;
}
.content {
/*内容区宽度自适应*/
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightpink;
}
添加如上代码到style,设置主体部分的三个块
第一个:宽200px,最低高800px
第二个:自适应宽度,最低高800px
第三个:宽200px,最低高800px
方案1: 绝对定位
/*定位父级*/
.main {
position: relative;
/*相对定位父级元素*/
}
.left {
position: absolute;
/*绝对定位第一个元素*/
left: 0;
top: 0;
}
.right {
position: absolute;
/*绝对定位第三个元素*/
right: 0;
top: 0;
}
/*用外边距margin,挤出中间内容区*/
.content {
margin-left: 210px;
margin-right: 210px;
}
添加如上代码到style,注意注释。
方案2: 浮动定位
/*左侧左浮动*/
.left {
float: left;
/*第一个元素向左浮动*/
}
/*右侧右浮动*/
.right {
float: right;
/*第三个元素向右浮动*/
}
/*内容区设置*/
.content {
float: left;
/*第二个元素向左浮动*/
/*如果width过大,右侧的元素将被挤到下一行*/
width: 580px;
margin-left: 10px;
/*左侧的外边距为10px时,200+10+580+右侧的200差10正好为第二三个元素的间距*/
}
/*清除子元素浮动影响*/
.main {
overflow: hidden;
}
添加如上代码到style,注意注释。
总结:
这是关于相对定位和绝对定位的测试总结