css代码如下
<div>开始</div> <div class="parent"> <div class="first"> </div> </div> <div class="step"></div> &...
css代码如下
<div>开始</div>
<div class="parent">
<div class="first">
</div>
</div>
<div class="step"></div>
<div class="last">结束</div>
first元素浮动了，于是last元素往上追加，被遮挡了。
* {
margin: 0;
padding: 0;
}
.first {
float: left;
width: 100px;
height: 100px;
background: red;
}
由于浮动的元素是不占位置的，那么我们需要用到清除浮动的技术。
了解之前先了解一下BFC，叫块级格式化上下文，是一个独立的渲染区域。
BFC里页面上独立的容器，子元素不会影响到外面，外面也无法影响到里面。
如何形成BFC
flot不为none
position为fixed和absolute
display为flex，inline-flex，table，table-cell，table-caption，inline-block
overflow为auto，scroll，hidden
了解了这个多，我们解决上面的问题，只要创建PFC就可以了，添加样式，使用下面的任意一种即可
.parent {
display: inline-block;
/* height: 100px; */
/* display: table-cell; */
/* display: table-caption; */
/* display: flex; */
/* display: inline-flex; */
/* overflow: hidden; */
/* overflow: scroll; */
/* overflow: auto; */
}
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
浮动的元素没有高度，所以可以给浮动的父元素添加高度即可。
clear属性
clear 属性清除浮动的原理是什么？
采用 BFC 解决高度塌陷和clear 属性清除浮动相比的优势是什么？
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。
设置了clear的元素将不像前一个浮动元素对齐，换行重新开始。
