深入浮动

我们知道正常文档流下块元素是单独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深入浮动</title>
    <style type="text/css">
        .main{
            width: 100%;
        }
        .sub1{
            width: 200px;
            height: 200px;
            color: #000;
            background-color: yellow;    
        }
        .sub2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="mian">
        <div class="sub1">A</div>
        <div class="sub2">B</div>
    </div>    
</body>
</html>

结果：

给他们加上浮动后，可以让他们并排

    .sub1{
            float: left;
            width: 200px;
            height: 200px;
            color: #000;
            background-color: yellow;    
        }
        .sub2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

浮动可以使元素移到左边或右边，并且允许后面的文字或元素环绕着它。

浮动最常用的就是实现水平方向上的并排布局

float有三个属性：left、right、none；

对于浮动，具有两个最重要的特点：

（1）把一个元素定义了float：left或float：right，不管这个元素之前是inline或是inline-block还是其他类型，它都要转变为block类型。也就是说它具有：width、height、margin、padding等特性

（2）一个元素定义了float:left或flat:right,这个元素就会脱离文档流，后面的元素会紧跟着填上空缺的位置

浮动的影响

（1）对自身的影响

（2）对父元素的影响

（3）对兄弟元素影响

（4）对子元素的影响

自身的影响

如果一个元素设置了浮动，则不管这个元素是什么类型，都转化为块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深入浮动</title>
    <style type="text/css">
    strong{
        float: left;
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="mian">
    <strong>hello</strong>
    </div>    
</body>
</html>

对父元素影响

如果一个元素设置了浮动，它会脱离正常文档流。如果浮动元素的高度height大于父元素的高度，或者父元素没有设置高度，此时浮动元素就会脱离父元素。这就是我们常见的“父元素高度塌陷”。

大白话就是，父亲管不住儿子，儿子离家出走了

对兄弟元素的影响

当一个元素是浮动元素，它的兄弟也是浮动元素。我们就分它们是相同方向还是不同方向

（1）相同方向

这些元素会从左到右、从上到下，一个接一个排列

（2）相反方向

这两个元素就要移到两边（如果父元素的高度够的话）

（3）兄弟元素不是浮动元素的情况下

此时当前元素脱离文档流，并且覆盖兄弟元素

对子元素的影响

此时父子两个都是浮动元素，这是父元素会自适应包含住子元素

浮动的负作用

（1）父元素高度塌陷，导致边框撑不开，背景色无法显示

（2）页面布局错乱

深入浮动

推荐阅读