清除浮动的五种方式 - 20190429

一、为什么要清浮动?
  当有嵌套关系的元素时, 父元素的高度应该由子元素撑开，
  元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住

实例

<!--<div class="parent" style="border: 2px solid; float: left;">-->
<div class="box1">
    <div class="box2"></div>
    <!--<div class="clear"></div>-->
</div>
<!--</div>-->

实例

.box1 {
    width: 300px;
    border: 5px dashed red;
}

.box2 {
    width: inherit;
    height: 300px;
    background-color: lightblue;
}

/*浮动后脱离文档流, 父区块无法再包裹住*/
.box2 {
    float: left;
}

二、解决方案

  Ⅰ父元素设置与子元一样的高度
      注意：该方案非常Low,如果子元素高度变化,则必须同步修改父元素高度

实例

.box1 {
    /*height: 300px;*/
}

  Ⅱ 父元素跟着子元素一起浮动
      注意：如果父元素（box1）还有父元素,（parent） 那么也要添加float,一级一级往上走

实例

.box1 {
    /*float: left;*/
}

  Ⅲ 添加一个块元素（clear）,专用来清浮动

      注意：这个方案简单粗暴,但会多增加一个dom元素, 在服务器端渲染页面时, 会遇到些麻烦

实例

.clear {
    /*clear: both;*/
}

  Ⅳ 父元素添加一个伪元素,专用来清浮动
      思路：受方案Ⅲ提醒,既然不想添加一个多余的真实元素, 那就添加一个伪元素

实例

.box1::after {
    /*content: '我是新增加的内容';*/
    /*content: '\020';*/
    /*content: '';*/
    /*只要display是块就行,table,list-item...*/
    /*display: table;*/
    /*考虑到兼容性, 加个高度0,上个双保险,大多情况下可省略*/
    /*height: 0;*/
    /*clear: both;*/
}

      注意：content、display、clear缺一不可

Ⅴ 父元素添加overflower,专用来清浮动

实例

.box1 {
    /*overflow: auto;*/
    overflow: hidden;
}

    注意：此方案首选

三、BFC（块级格式化上下文）