浮动与清除浮动

浮动的出现主要是解决水平布局的问题 

块标签的浮动

        div{
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
            margin: 20px;
        }

        <div>a</div>
        <div>b</div>

添加两个div后，如果不添加浮动 效果如下图

 加上浮动 之后的效果：

 可以明显看到，div的布局发生了变化，变成了水平布局。

除此之外，当不给宽高时，块标签的特性是高度由内容撑开，宽度占满一行

下面验证当使用float并且不给块标签高度时的效果：

 此时，默认内容占满宽高

---

行标签的浮动

代码相同，把块标签div 换成了行标签span

        span{
            width: 100px;
            height: 100px;
            background-color: royalblue;
            margin: 20px;
        }

        <span>a</span>
        <span>b</span>
    

在没有使用float的情况下，span标签的效果：

当使用float时的效果：

span作为行标签本身是不支持宽高和外边距的

但是 从上图可以看出，

                        1.span标签在使用了浮动之后支持了css的所有样式     

                        2.两标签之间的间距是左右外边距相加

关于span标签的换行被解析特性，进行验证：

 

 

 浮动的特性总结

                1. 所有标签同排显示

                2. 行标签支持所有的css样式

                3. 默认内容撑开宽高

                4. 元素脱离文档流

---

浮动的清除

浮动产生的原因

元素使用浮动后会脱离文档流，父级元素检测不到子级的存在，高度无法撑开

        .fa{
           background-color: blue;
        }
        .one{
            float: left;
            background-color: blueviolet;
        }
        .two{
            float: left;
            background-color: brown;
        }
        .faa{
            background-color: orange;
            width: 200px;
            height: 200px;
        }

     <div class="fa">
            <div class="one">a</div>
            <div class="two">b</div>
     </div>
     <div class="faa"></div>
    

 上边出现的原因 是：a和b 使用了浮动，脱离了文本流，而父级div作为块标签高度由内容撑开，又因为检测不到a和b，所以此时的高度为0，故而不显示。

浮动的清除

浮动的清除有三种方式：

1. 在父级添加height元素属性，撑开父级的高度，但是拉伸页面宽度时，会出现不灵活的现象，延展性差，不建议使用

2.在父级使用overflow:hidden; 这是最推荐的一种方式

 

3. 在父级使用clear