CSS文档流浮动学习

定义

文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

文档流布局

可由于块元素在文档流中都是从上向下排列，如果让其实现水平排序：可以利用display设置为inline就可以水平排列。另外也可以设置元素浮动即：设置float值，其设置有三个选项:

none
默认按照文档流中进行排列,一般元素默认都是none值。
left
元素脱离文档流可以向左进行浮动
right
元素脱离文档流可以向右进行浮动。

文档流注意事项

浮动元素和文档流元素重叠的问题

让我们看一下演示案例：

div class="c1"></div>
<p>iOS是由苹果公司开发的移动操作系统 [1]  。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad上。iOS与苹果的macOS操作系统一样，属于类Unix的商业操作系统。原本这个系统名为iPhone OS，因为iPad，iPhone，iPod touch都使用iPhone OS，所以2010年WWDC大会上宣布改名为iOS（iOS为美国Cisco公司网络设备操作系统注册商标，苹果改名已获得Cisco公司授权）。
    2016年1月，随着iOS 9.2.1版本的发布，苹果修复了一个存在了3年的漏洞 [2]  。2018年9月22日，美国苹果公司在最新的操作系统中秘密加入了基于iPhone用户和该公司其他设备使用者的“信任评级”功能。</p>

    * {
        margin: 0px;
        padding: 0px;
    }
    .c1 {
        width: 200px;
        height: 200px;
        background-color: fuchsia;
    }

    p {
        background-color: greenyellow;
        height: 200px;
    }

此时页面呈现效果如下所示：
在这里插入图片描述
当设置div向左浮动的时候

    .c1 {
        width: 200px;
        height: 200px;
        background-color: fuchsia;
        float: left;
    }

此时页面呈现效果如下所示：
在这里插入图片描述
结论：浮动元素会比文档元素高级一些，如果文档里面有文字，浮动元素并不会覆盖文字，文字会进行环绕。
2. 浮动元素对其他元素的影响问题

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

.c1 {
    width: 200px;
    height: 200px;
    background-color: aqua;
}

.c2 {
    width: 200px;
    height: 200px;
    background-color: gold;
}

.c3 {
    width: 200px;
    height: 200px;
    background-color: darkgreen;
}

页面效果如下所示：
在这里插入图片描述
此时让c2向右边浮动

.c2 {
    width: 200px;
    height: 200px;
    background-color: gold;
    float: right;
}

页面效果如下：我们发现c2元素确实向右边进行移动，并且c3元素向上紧挨着c1元素
这是因为当c2开启浮动后即脱离文档流后，原有的位置会被文档流中元素进行占据。
在这里插入图片描述
同理我们设置元素向左移动，然后新的页面效果如下所示：

此时我们发现c3元素竟“消失”了，那么c3元素哪里去了呢？我们打开chrome的控制台如下所示：

我们发现c3元素似乎依然存在，造成原因就是：浮动元素会比文档元素高级一些，所以同一位置上优先显示浮动元素，这就造成了好像c2会覆盖c3文档元素。同时c2浮动后并没有覆盖掉他上面的兄弟元素。如果设置c1元素向左浮动呢？效果如下所示：
在这里插入图片描述
我们发现c2此时在c1的右边，并没有出现c2覆盖c1的情况与此同时c3依然是消失的，从上面我们可知c1显示的优先级高于c3，所以看着像是c1覆盖掉了c3元素。
结论：.浮动元素进行浮动不会超过其兄弟浮动元素的，浮动元素如果上边是一个没有进行浮动的元素则浮动元素不会超过快元素（文档流中的快元素默认占一行）。
3. 脱离文档流的高度塌陷问题

<div id="c1">
    <div class="c2"></div>
</div>

#c1 {
    border: red 10px solid;
}

.c2 {
    height: 200px;
    width: 200px;
    background-color: blue;
}

页面效果如下所示：
在这里插入图片描述
此时一起正常，此时我们设置c2元素开始向左浮动，此时页面效果如下所示：

我们发现c1元素塌陷了，而为什么之前c1没有塌陷呢？我们都知道c1元素并没有设置宽和高，而它的宽度默认为父元素的宽度也就是body的宽度，它的高度默认为子元素撑起来的高度。原先c1被c2元素进行支撑，当c2脱离文档流后就没有元素支撑高度，所以就造成了高度塌陷的问题。

有以下两种方法解决高度塌陷的问题：

设置元素visibility的值

#c1 {
    border: red 10px solid;
    overflow: hidden;
}

此时页面效果图如下所示：没有高度塌陷的问题
在这里插入图片描述

为塌陷元素后面在添加一个子元素

<div id="c1">
    <div class="c2"></div>
    <div class="c3"></div>
</div>

此时页面效果图如下所示：没有高度塌陷的问题。
在这里插入图片描述
亦可通过以下方式解决高度塌陷问题,这个同样也是在塌陷元素下添加一个子元素

.c2:after {
    content: "";
    display: block;
    clear: both;
}

这里的clear是清除浮动影响，当一个元素a进行浮动的时候，另一个元素b(文档流)受此影响也进行向上浮动，如果想清除a元素对b的影响则需要设置clear进行浮动元素的清除。clear可以设置以下值：

clear:left 不受左边浮动影响
clear：right不受右边影响
clear：both 清除受影响最大的那个元素