5、浮动的处理方式

5.1 介绍

块级元素：独占一行
h1~h6 p div 列表…

行内元素：不独占一行

span a img strong…
行内元素可以被包含在块级元素中

5.2 浮动

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display:none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display:inline-block;
        }
    </style>

1、这也是实现行内元素排列的方式，大多数情况用float

5.3 float

1、左右浮动

div{
    margin: 10px;
    padding: 5px;

}

#father{
    border: 1px solid red;
}
.layer01{
    border: 1px solid saddlebrown;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px solid darkblue;
    display: inline-block;

}
.layer03{
    border: 1px solid forestgreen;
    display: inline-block;
}
.layer04{
    border: 1px solid aqua;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
}

5.4、父级边框塌陷的问题

/clear:right 右侧不允许有浮动元素
clear:left 右侧不允许有浮动元素
clear:both 两侧不允许有浮动元素/

解决方案：
1、增加父级元素的高度

#father{
    border: 1px solid red;
    height: 800px;
}

2、增加一个空的div标签，清除浮动

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow

在父级元素中增加一个 overflow: hidden;

4、父类添加一个伪类：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：
1、 浮动元素后面增加空div
简单，代码中尽量避免空div
2、 设置父元素高度
简单，元素假设有了固定高度 就会被限制
3、 overflow
简单，下拉的一些场景避免使用
4、 父类添加伪类after（推荐）
写法复杂一点，但是没有副作用

5.5 对比

• display
  方向不可以控制

• float
  浮动起来可能会脱离文档流，所以要解决父级边框塌陷问题