面试题:浮动

1、为什么要清除浮动
开发过程中，浮动是需要掌握的一个技能，页面布局当中，在无法确定子元素的高度（height）时，我们无法给父级标签一个固定的高度（height），我们想要的是，由子元素的高度去控制父元素的高度。

所以，当子元素设置了浮动（float）属性之后，父元素的高度没有进行设置，这样就会导致父元素的高度塌陷(原本的height被重置为0)，这就涉及到了清除浮动的重要性

2、清除浮动的四种方法
第一种方法：额外标签法
该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 html 代码所示：
html代码

<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
  <div class="clear" style="clear: both;"></div>  <!-- 添加一个空的标签 -->
</div>
1
2
3
4
5
第二种方法：父元素添加 overflow: hidden
html代码

<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>
1
2
3
4
css代码

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    .app{
        overflow: hidden; /* 父元素添加 overflow 属性清除浮动 */
        width: 500px;
        margin: 0 auto;
        border: 1px solid #409EFF;
    }
    .app1{
        float: left;  /* 子元素向左浮动 */
        width: 200px;
        height: 100px;
        background-color: skyblue;
    }
    .app2{
        float: left; /* 子元素向左浮动 */
        width: 200px;
        height: 100px;
        background-color: pink;
    }
</style>

第三种方法：:after 伪元素法，为父元素清除浮动
html代码

<div class="app clearfix">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

css代码

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    /* --------以下两行样式代码为固定写法--------  */
    .clearfix:after{
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix{
        /* 为 IE6、IE7浏览器设置的清除浮动 */
        *zoom: 1;
    }
    /* --------以上两行样式代码为固定写法--------- */
    .app{
        width: 500px;
        margin: 0 auto;
        border: 1px solid #409EFF;
    }
    .app1{
        float: left;  /* 子元素向左浮动 */
        width: 200px;
        height: 100px;
        background-color: skyblue;
    }
    .app2{
        float: left; /* 子元素向左浮动 */
        width: 200px;
        height: 100px;
        background-color: pink;
    }
</style>

优点：没有额外增加标签，结构简单

第四种方法：:after和:before双伪元素清除浮动
html代码

<div class="app clearfix">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
</div>

css代码

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    /* --------以下两行样式代码为固定写法--------  */
    .clearfix:after,.clearfix:before{
        content: '';
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        /* 为 IE6、IE7浏览器设置的清除浮动 */
        *zoom: 1;
    }
    /* --------以上两行样式代码为固定写法--------- */
    .app{
        width: 500px;
        margin: 0 auto;
        border: 1px solid #409EFF;
    }
    .app1{
        float: left;  /* 子元素向左浮动 */
        width: 200px;
        height: 100px;
        background-color: skyblue;
    }
    .app2{
        float: left; /* 子元素向左浮动 */
        width: 200px;
        height: 100px;
        background-color: pink;
    }
</style>
总体来说，第四种方法和第三种方法并没有多大的区别，改动只有一点点，也使代码更加简洁了。