CSS浮动布局

说浮动布局，就得先知道文档流，文档流有正常文档流、脱离文档流。

• 正常文档流：将一个页面从上到下分为一行一行，块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。使元素不按正常文档流就是脱离文档流。
  例如：

对应的正常文档流如图，

image.png

改变正常文档流的方法：浮动和定位。

1.使用浮动脱离文档流

例如01：

html:
    

        
div01块
        
div02块
        
div03块
        
div04块
    
scss (用了sass预处理器):
.div00{
    width: 200px;
    //注意这里目前未设置父元素的高度
    background-color: chartreuse;
    div{
        height: 50px;
    }
    .div01{
        float: left;
        background-color: aqua;
    }
    .div02{
        background-color: bisque;
    }
    .div03{
        background-color: blueviolet;
    }
    .div04{
        background-color: blue;
    }
}

结果：

image.png

分析：对div01设置了左浮动，使div01脱离了文档流，div01是在div02的上面一层，实际的div02还是占据了一整行，div02的文字部分看着像被挤出来了，其实这就是文字环绕的实现（文字是英文时有点问题）。
例如02：
只设置后面两个div左浮动
结果：

image.png

例如03：
全部设置左浮动，会从左到右依次排列。（right的相反）注意这里出现了父元素高度塌陷，height为0

image.png

例如04：
父元素宽度不能容纳浮动的元素时，就会换到下一行。

image.png

2.浮动带来的影响

• 对设置了浮动的元素自身来讲，无论是什么元素这个元素都会变成block元素
• 浮动元素的高度大于父元素的高度，或者父元素没有设置高度，那么会出现父元素高度塌陷的问题，如例03
  如何解决呢？
  有clear、overflow:hidden,::after三种，这里推荐第三种伪类的方法

.div00{
    *zoom: 1;
}
.div00::after{
    clear: both;
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
}

效果如图：对比例3，父元素高度塌陷问题解决

image.png

• 对兄弟元素的影响见例01和例03
• 父元素是浮动元素，并且他的子元素也是浮动元素，那么父元素会自适应的包含子元素，也是解决父元素高度塌陷的方法之一

此外，浮动可以用来实现两列布局或多列布局
例如：

html:

    

        
div01块
        
div02块
    

scss:
.div00{
    *zoom: 1;
}
.div00::after{
    clear: both;
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
}
.div00{
    width: 100%;
    background-color: white;
    div{
        height: 5000px;
    }
    .div01{
        margin-left: 10%;
        width: 40%;
        float: left;
        background-color: aqua;
    }
    .div02{
        margin-right: 10%;
        width: 40%;
        float: right;
        background-color: bisque;
    }
}

结果：

image.png