前端学习笔记--清除元素浮动

浮动的元素不占有高度，会自动上浮；

因为父盒子不方便给高度，

所以为了解决子盒子浮动不占有高度位置，让父盒子没有高度也不影响标准流盒子。所以需要清除浮动。

清除浮动的本质就是清除浮动元素造成的影响。
语法：clear:both(清除左右两侧浮动的影响)
清除浮动的策略是：闭合浮动：只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

清除浮动的方法：

1. 额外标签法也称为隔墙法，是W3C推荐的。

   原理： 找到最后一个浮动的盒子，添加一个标签（必须是块级元素），给标签添加style clear: both

<style>
	.box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .div1 {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
</style>
<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
   <div style="clear: both;"></div>
</div>
<div class="footer"></div>

优点：方便，易懂
缺点：结构性较差，添加无意义的标签

2. 父级添加overflow属性
   原理：可以给父级添加 overflow属性，将属性值设置为hidden、auto或者scroll
   注意：给父元素添加代码

<style>
	.box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            overflow: hidden;
        }

        .div1 {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
</style>
<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
   <div style="clear: both;"></div>
</div>
<div class="footer"></div>

优点：代码简洁
缺点：无法显示溢出部分

3. 父级添加after伪元素
   原理： :after 方式是额外标签法的升级版，也是给父元素添加。
   实际上就是给子盒子后面再添加一个盒子（块级元素）这个盒子里面有clear：both
   相当于额外标签法的升级版。

<style>
	/** 伪元素 清除浮动。方法3*/
    .clearfix:after {
         content: ""; /*必须*/
         display: block; /*转成块级元素*/
         height: 0;
         clear: both;
         visibility: hidden;
     }
     .clearfix{
         /*IE 6、7 专有 清除浮动的写法*/
         *zoom: 1;
     }
      .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .div1 {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }  
</style>
<div class="box clearfix">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>
<div class="footer"></div>

优点：没有增加额外的标签，让结构简单
缺点：照顾低版本的浏览器

4. 父级添加双伪元素
   原理：在子盒子的前面，和后面分别插入一个盒子。

<style>
	/** 伪元素 清除浮动。方法3*/
    .clearfix:before,
    .clearfix:after {
           content: ""; /*必须*/
           display: table; /*转成块级表格*/
       }
        .clearfix:after{
        clear:both;
     }
     .clearfix{
         /*IE 6、7 专有 清除浮动的写法*/
         *zoom: 1;
     }
      .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .div1 {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }  
</style>
<div class="box clearfix">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>
<div class="footer"></div>

总结：

为什么要清除浮动？

1. 父盒子没有高度，
2. 子盒子浮动了
3. 影响下面的布局