目录
1.什么是高度塌陷
一般情况下,我们在写网页的时候父元素的高度不会写固定值,而是让他被子元素撑开,随着子元素高度的变化而变化
高度塌陷:给子元素设置浮动,子元素脱离文档流,就不能再撑开父元素的高度,
导致父元素高度的丢失,从而影响了整个页面的布局
示例:
<div class="outer">
<div class="inner"></div>
<div class="inner2 inner"></div>
</div>
<div class="box3"></div>
现在outer这个盒子里面有两个小盒子inner,还有一个兄弟box3
现在有一个需求,我需要给两个小盒子inner设置浮动,让我们看看设置以后的效果
.inner {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.inner2{
background-color: green;
float: left;
}
大家看到什么变化没有,因为没有给父元素也就是红盒子设置高度,给两个元素也就是蓝色和绿色盒子设置浮动以后,红盒子被压瘪了,而且兄弟元素黄色盒子还跑上去了,这个现象就是死父元素的高度塌陷
2.高度塌陷的解决方法
既然知道了高度塌陷的成因,那解决高度有什么方法呢。大家不要着急哈,解决高度塌陷总共可以分成三种方法,听我来慢慢讲。
方法一:既然知道父元素是因为高度丢失导致的高度塌陷,那我们可以给父元素设置一个高度,但这种方法不推荐使用,前面说过 因为让网页有一个更好的展示效果,一般不会给父元素设置高度。
方法二:可以开启元素的隐含属性,BFC
首先关于BFC有一个比较经典的面试题:你能说一说你对BFC的理解?
答:什么是BFC?开启BFC后,元素有什么作用?如何开启BFC
BFC是页面元素中的隐含属性:Block Formatting Context 即块格式化上下文,简称BFC
当开启元素的BFC以后,元素会变成一个独立的布局区域,不会在布局上影响到外面的元素
BFC 理解为一个封闭的大箱子,箱子内部的元素不会影响到外部。
开启BFC后,元素将会具有如下的特性:
1.父元素的垂直外边距不会和子元素重叠 (解决父子外边距重叠的问题)
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素(可解决高度塌陷)
如何开启元素的BFC
1.设置元素浮动(不推荐) -
示例:还是前面的几个盒子 做一下各种方法的展示
.outer {
border: 10px red solid;
float: left;
总结:使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移,不能解决问题
2.设置元素为inline-block(不推荐)
.outer {
border: 10px red solid;
display: inline-block;}
总结:可以解决问题,但是会导致宽度丢失,而且会出现三像素的空白问题,不推荐使用这种方式
3.将元素的overflow设置为一个非visible的值
之前篇博文讲过,overflow属性有四个可选值:
visible 默认值 正常显示
hidden 剪裁多余
auto 自动根据内容显示是否出现滚动条
scroll 生成双向滚动条
让我来演示一下
.outer {
border: 10px red solid;
overflow: hidden;}
总结: 将overflow设置为hidden是副作用最小的开启BFC的方式,也是比较推荐的方式
4.设置元素绝对定位(暂时没学习)
.outer {
border: 10px red solid;
position: absolute;}
总结:元素也会脱离文档流,虽然可以撑开父元素,但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移,不能解决问题
方法三:清除浮动
说到清除浮动,我们先来说明一下说明是清除浮动
现在有三个盒子,设置完样式以后
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
}
我们现在分别给box1和box2设置左浮动以后
发现box3跑到box1下面了,这个是元素浮动以后本身的特点所致,上篇博文讲过,我们现在不想box1和box2浮动对box3产生影响,就可以给box3用清除浮动
}
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
大家看到没有,我们消除了box1和box2浮动对box3的影响,这个就叫清除浮动
总结:
我们有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能
clear可以用来清除其他浮动元素对当前元素的影响
可选值:
none,默认值,不清除浮动
left,清除左侧浮动元素对当前元素的影响
right,清除右侧浮动元素对当前元素的影响
both,清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
所以我现在来讲讲如何用清除浮动解决父元素高度塌陷的问题
可以直接在高度塌陷的父元素的最后,添加一个空白的div,
由于这个div并没有浮动,所以他是可以撑开父元素的高度的,
然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度, 基本没有副作用。
总结: 使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构,所以我们可以
通过after伪类,选中box1的后边
可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,
这样做和添加一个div的原理一样,可以达到一个相同的效果,
而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用
<div class="box1 clearfix">
<div class="box2"></div>
</div>
.clear:after {
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
好啦,今天的分享结束了,大家好好学习哦。