五、浮动

5-1、标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

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

5-2、display

display是一种实现行内元素的排列方式，但多数情况用float

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

5-3、float

#father{
    border:1px #000 solid
}
.layer01{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border:1px #F00 dashed;
    display: inline-block;
    float: right;
}

5-4、父级边框塌陷问题

clear

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

解决方案：

1. 增加父级元素的高度

#father{
    border:1px #000 solid;
    height: 500px;
}

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

<div class="clear"></div>.clear{
    clear: both;
}

3. overflow

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

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

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

小结：

• 浮动元素后面增加空div，简单，但代码中尽量避免空div

• 设置父元素高度，简单，但元素设置了固定的高度，就会被限制

• overflow，简单，下拉的一些场景避免使用

• 父类添加一个伪类：after（推荐使用），写法稍微复杂，但没有副作用

5-5、对比

• display：方向不可以控制

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

链接：https://blog.csdn.net/clover_page/article/details/130100672

作者：姜伯約