一:高度塌陷
一般情况下,我们是不给父元素设置高度的,让其内部的子元素自动撑开父元素的高度, 这样父元素的高度就可以随着子元素高度的变化而变化 ,. 然而子元素若设置浮动,就会脱离文档流,也就撑不开父元素的高度从而导致父元素的高度丢失,影响整个页面布局,这就叫高度塌馅。
不设置浮动时,代码如下 :
<style type="text/css">
.outer {
width: 200px;
border: 10px red solid;
}
.inner {
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
width: 300px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="box3"></div>
</body>
结果如下:
给子元素 “inner ”设置浮动
.inner {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
结果如下:
二:解决方法
1.给父元素设置自己的高度(但不推荐使用)
.outer {
width: 200px;
border: 10px red solid;
height: 100px;
}
2.给元素开启BFC(块级格式化上下文)
BFC是元素自带的一个属性,默认是关闭的状态,一旦开启了,这个元素就会成为一个独立区块,具有一些特点,这些特点,可以帮助我们解决一些问题
BCF开启后具备的特点:
1、开启BFC的元素,垂直方向外边距不会重叠
2、开启BFC的元素,不会被浮动元素覆盖
3、开启BFC的元素,会包含住浮动元素,可以解决高度塌陷问题
如何开启BFC
1、设置浮动
可以解决高度塌陷问题,但宽度会丢失,且页面布局依然影响
.outer {
width: 200px;
border: 10px red solid;
float: left;
}
2、将元素转成行内块
可以解决高度塌陷,但宽度会丢失,且有三像素问题
.outer {
width: 200px;
border: 10px red solid;
display: inline-block;
}
3、overflow属性 非visible值
副作用最小,建议使用
.outer {
width: 200px;
border: 10px red solid;
overflow: hidden;
}
4、开启绝对定位
可以解决高度塌陷问题,但宽度会丢失,且页面布局依然影响
.outer {
width: 200px;
border: 10px red solid;
/* 开启绝对定位 */
position: absolute;
}
3.在浮动元素下面添加一个空白的块元素
由于这个块元素没有浮动,还在文档流中,可以给这个块元素设置清楚浮动,让其撑开父元素的高度。缺点是页面多了一个空白的结构。
未添加空白的块元素 ,结果如下
添加一空白块元素 box3
.box3{
width: 200px;
height: 100px;
background-color: yellowgreen;
clear: both;
}
结果如下:
清除浮动
clear可以用来清除其他浮动元素对当前元素的影响
可选值:
none,默认值,不清除浮动
left,清除左侧浮动元素对当前元素的影响
right,清除右侧浮动元素对当前元素的影响
both,清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动
<body>
<!-- 需求,设置box1左浮动,box2右浮动,而box3待在原地不动 -->
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
float: right;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
}
结果如下:
通过 clear 消除box2浮动对box3的影响
/* 需求:消除box2浮动对box3的影响 */
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
结果如下:
4.可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动
这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
.box1 {
width: 200px;
border: 10px solid red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
结果如下:
通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动
.clearfix::after {
content: "";
/* display: block; */
display: table;
clear: both;
}
结果如下: