浮动

1.1标准文档流

块级元素：独占一行

h1~h6,p,div,列表……

行内元素：不独占一行

span,a,img,strong……

行内元素可以被包含在块级元素中，反之不行

1.2 display

<!--
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联（可以有行内元素的属性），在一行
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

注：display也是实现行内元素排列的一种方式，但通常情况下float使用较多。

1.3 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid red;
}
.layer01{
    border: 1px solid red;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px solid red;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px solid red;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px solid red;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    float: right;
}

1.4 父级边框塌陷问题

clear

/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 
 */
.layer04{
    border: 1px solid red;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    float: right;
    clear: right;
}

解决方案：

1、增加父级元素的高度

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

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

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

<div class="clear"></div>

3、overflow

/*在父级元素中，增加一个 overflow: hidden；方法*/

#father{
    border: 1px solid cornflowerblue;
    overflow: hidden;
}

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

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

小结：

• 浮动元素后面增加空div

  • 简单，但需注意代码中尽量避免空div

• 设置父元素的高度

  • 如果元素有固定高度，会被限制

• overflow

  • 在下拉的一些场景中避免使用
• 父类添加一个伪类：after（推荐使用）

display：方向不可以控制

float：浮动起来后会脱离标准文档流，需解决父级边框塌陷问题