消除高度塌陷方案探究
高度塌陷的最终方法
编写结构
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner01"></div>
</div>
CSS:
.outer{
border: 5px solid red;
}
.inner{
background-color: #bfa;
width: 200px;
height: 200px;
}
1.通过填充 HTML元素解决高度塌陷
通过块级元素
1.说明因子元素设置浮动导致父元素高度塌陷
CSS:
.inner{
background-color: #bfa;
width: 200px;
height: 200px;
float: left;
}
2.设置inner01子元素的内容,使得能撑开父元素
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner01">我是替补子元素</div>
</div>
虽然是可以撑起父元素,但是高度不够高。最初的目的是解决父元素因为某个子元素设置浮动导致的塌陷问题,所以父元素撑开的高度要和设置浮动的元素( 绿色块 )高度一样。
Q: 为什么 inner01 元素是在inner元素下编写的,但是实际布局却不是在 inner 下?假如 inner01 布局在 inner 下,这样就可以达到该有的高度(子元素大小)?
A: 这是因为绿色块 inner 设置浮动float后,影响了原来的布局,使得文字环绕在浮动元素周围。
也就是说如果可以清除浮动元素对其他元素的影响( 文字环绕效果 )的话,布局可以达到理想效果。
3.使用clear
属性,清除浮动元素对其他元素的影响
CSS
.inner01{
clear: both;
}
分析:
这个效果就是当子元素不设置浮动时,正常撑开父元素高度的效果,符合预期。
由于使用 clear
清除了浮动元素( inner )对其他元素( inner01 )的影响( 文字环绕和位置空缺导致上移 ) ,这样,元素设置浮动后的布局就和没有设置浮动的布局一样。这样就完美的解决了子元素设置浮动后导致父元素高度塌陷的问题。
Q: 既然已经删除了inner元素的内容,能否删除
inner01
的标签代码块?A: 不能,因为这个效果是因为 inner01 设置了
clear
导致的,虽然可以删除了inner01的内容,但是不能删除这个标签,要不然clear也失效了,就会回到高度塌陷的状态。
4.尝试将inner01元素设置高度来撑开父元素。
CSS:
.inner01{
background-color: rgb(238, 63, 165);
height: 200px;
}
发现通过给子元素添加内容和 设置子元素高度 都可以撑开父元素。
但是上述方式是通过添加html代码的形式来解决高度塌陷问题。
2.通过 CSS 样式解决高度塌陷
通过伪元素
1.使用伪类after通过css的方式来添加子元素,使用clear清除影响,撑开父元素高度。
由于上述的方法是通过添加html代码(
inner01标签
)来改变页面布局效果的,HTML是用于构建页面结构的,而CSS是用来改变页面效果的,所以这种方式不符合W3c规范理念。既然主要目的是让父元素下有内容,能否使用css方式添加内容呢.可以使用
::after
伪类。
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
border: 5px solid red;
}
.inner{
background-color: #bfa;
width: 200px;
height: 200px;
float: left;
}
.outer::after{
content: '我是填充内容';
clear: both;
}
Q: 为什么还是没有完全撑开?
A: 这是因为虽然使用
after
,设置了content属性,也使了clear
清除浮动元素影响,但是由于添加的内容本身是行内元素( 而不是像使用HTML方法的inner01是div块元素 ),所以还需要使其变为块元素。
CSS:
.outer{
border: 5px solid red;
}
.inner{
background-color: #bfa;
width: 200px;
height: 200px;
float: left;
}
.outer::after{
content: '我是填充内容';
display: block; /** 新增代码 **/
clear: both;
}
使用 after
属性给 父元素内容的最后位置添加内容( 即在浮动子元素下 ),然后设置 clear
属性清除浮动元素对其他元素的影响,使得页面布局可以恢复到正常文档流布局 ,效果上,父元素高度不会塌陷。
可以删除content中的内容
注意事项和细节;
- 使用 after伪类设置内容时,after是在 父元素的内容下的最后一个位置 添加内容,所以after要为父元素设置。
- after伪类的content默认是行内元素,需要改变为块元素才能完成布局填充。
解决父元素高度塌陷问题有很多解决方案,目的是找出副作用最小,使用最方便的方案。
clearfix
在布局的内容上面,主要需要解决问题有两个
- 父元素高度塌陷问题
- 垂直外边距重叠问题
目的是希望找到一个方法可以同时解决这两个问题.就是用到了clearfix选择器
clearfix其实是封装了解决常见问题的样式规则,遇到这样的问题,可以直接使用。
clearfix选择器的使用
.clearfix::before, .clearfix:after{
content: '' ;
display: table;
clear: both;
}
其中
.clearfix::before{
content: '' ;
display: table;
}
是解决垂直外边距重叠
的问题
而
.clearfix::after{
content: '';
clear: both;
}
是解决父元素高度塌陷
问题的
合并就是最上面的形式
Q: 为什么使用table而不使用block?
A: table既可以解决高度塌陷又能解决外边距重叠问题。
转载自:https://juejin.cn/post/7235237072439623735