CSS如何清除浮动

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的元素将不像前一个浮动元素对齐，换行重新开始。