1、为什么要清除浮动
?
为了解决块级元素浮动后父元素塌陷
问题。
2、为什么会产生 父元素塌陷?
首先父元素没有设置高度,父元素的高度是由子元素中最高的控件决定,撑开
简单可以这样理解,原本是在和父元素在同一层级上。当子元素浮动后,这样子元素会浮在父元素上面不在占据父元素的空间。原本是可以撑开父元素,结果就不在被撑开。
3、怎么解决父元素塌陷问题?
下面会使用例子的形式提供三种 解决父元素塌陷问题。
css 代码:
<style>
/* 3. 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
/* 清除浮动 */
/* .clearfix {
*zoom: 1;
} */
.father {
width: 400px;
border: 1px solid red;
/* 1、解决父亲塌陷问题 直接给父元素设置 height */
/* height: 100px; */
/* 2、给父元素设置 float */
/* float: left; */
}
.son {
width: 100px;
height: 100px;
background-color: aqua;
}
/* 浮动会导致父亲塌陷 */
.left {
float: left;
}
.right {
float: right;
}
html代码:
<div class="father clearfix">
<div class="son left"></div>
<div class="son right"></div>
</div>
建议使用 clearfix 类进行清除浮动。
清除浮动可能还有其他方法,这里仅供自己学习期间总结。