浮动-杨标的博客

浮动

之前的时候我们讲过通过盒子模型与元素类型进行的布局我们叫标准流布局，这种布局方式可以解决日常布局中的大部分问题，但是仍然有些问题是不通解决的，这个时候我们就要考虑另一种布局规范

另一种布局规范就是脱离了标准规范的一种布局，我们叫脱流布局

我们把标准规范布局叫标准流布局，把脱流标准流的布局叫脱流布局，它们两个合起来统称为流式布局

浮动的现象

要让一个元素浮动起来，需要在当前这个元素上面去设置float属性，可以把浮动理解成一种排列的命令，它可以向左排列，也可以向右排列

float:left;			/*向左浮动*/
float:right;		/*向右浮动*/

我们现在通过两种不同的元素看去一下的浮动的效果

<style>
    .div1{
        width: 100px;
        height: 100px;
        background-color: deeppink;
        float:right;
    }
</style>
<div class="div1">
    这是一个盒子
</div>

上面的盒子，我们使用了一个右浮动的命令，这个时候这个元素就会向右进行排列

同时我们也可以对多个元素进行浮动

<style>
	.ul1{
        list-style-type: none;
    }
    .ul1>li{
        float: left;
    }
</style>
<ul class="ul1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
</ul>

这个时候我们可以看到本来是块级级元素的li元素也排列在了同一行

按照我们之前所学习的标准流布局规范里在，块级元素是不能够排列在同一行的，但是现在我们使用浮动命令以后块级元素li却排列在了同一行，这种现象就脱离了之前的标准规范

浮动float可以很轻松的让我们的页面元素按照自己的命令去进行排列，它是一个非常好用的布局用法，但是它也有它的缺点与影响

浮动的影响

一个元素浮动以后会自身照成影响，也会对后面的布局造成影响，如下图所示

<style type="text/css">
    .div1{
        width:200px;
        height: 100px;
        background-color: deeppink;
        float: left;
    }
    .div2{
        height: 300px;
        background-color: lightseagreen;
    }
</style>
<div class="div1">
</div>
<div class="div2">
</div>

效果图

浮动前	浮动后

这个时候我们可以明显的感到后，后面的蓝图盒子的布局出现了问题，为什么会有这些问题呢？

浮动的元素是脱流了标准文档流的（我们叫脱流），所以浮动最大的影响就是脱流了，要清楚浮动的影响就要弄清楚脱流的影响（关于这一点，可以看章节《脱流的影响》）

其实浮动造成的最大影响就是会对父级元素的高度坍塌，这样就会影响到后面的布局。如下代码所示

<style type="text/css">
    .div1{
        background-color: deeppink;
    }
    .div2{
        height: 100px;
        width: 100px;
        background-color: blue;
        float:left;
    }
    .div3{
        font-size: 32px;
        height: 150px;
        background-color: #20B2AA;
    }
</style>
<div class="div1">
    <div class="div2">盒子2</div>
</div>
<div class="div3">
    这是浮动后面的盒子内容
</div>

效果图对比

浮动前	浮动后

这个时候我们会看到红色的盒子消失了（浮动元素不占用原来的位置，照成父级高度坍塌），同时蓝色的盒子顶上去了，对后面的文字布局也造成了影响

所以对于这一种布局的影响，我们一定解决掉，W3C也提供了很多种方法去解决这一种布局影响

清除浮动的影响

使用clear:both去清除浮动的影响

clear:both其实是clear:left（清除左浮动）与clear:right（清除右浮动）的集合

在浮动元素的后面添加一个块级元素（一般我们会使用div元素），然后在这个元素上面添加style="clear:both"即可

在上面的案例里面，我们看到div2盒子浮动以后照成了后面的布局混乱，所以我们可以在div2盒子的后面添加一个清除浮动的元素
```
<div class="div1">
    <div class="div2">盒子2</div>
    
    <div style="clear: both;"></div>
</div>
<div class="div3">
    这是浮动后面的盒子内容
</div>
```
主要就是第4行代码，当我们加上这行代码以后，就看到div1盒子恢复了高度，并且后面的布局也正常了

同时注意一下，这个 <div style="clear: both;"></div>也可以写在div1盒子的后面，这样也是可以的
使用BFC也可以恢复父级元素的高度，清除浮动的影响，最常见的BFC就是overflow:auto

在浮动元素的父级元素上面（也就是高度坍塌的这个元素上面）添加BFC代码
```
<div class="div1" style="overflow: auto;">
    <div class="div2">盒子2</div>
</div>
<div class="div3">
    这是浮动后面的盒子内容
</div>
```
在第一行代码上面，我们在div2浮动元素的父级元素div1上面添加了一个overflow:auto的属性，这样div1元素就恢复了高度
使用::after伪元素去清除浮动

这一种方式其实就是在第一种方式上面进行了一个变化而已，这个在第一种清除浮动的方式上面得到如下代码
```
.div1::after{
    content: "";
    display: block;
    clear: both;
}
```
这样所表现出来的效果就跟添加了div块级元素以后设置clear:both的效果是一样的

后期为了使用方便，我们会把这个样式单独的写出来，如下
```
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
```
这样谁使用了浮动以后，就在谁的父级去使用clearfix这个样式

浮动元素的居中方案

浮动的元素因为脱流了，不会使用之前的任何居中规范，所以它应该怎么处理居中问题呢？

<style type="text/css">
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
    .box{
        border: 2px solid red;
    }
    .box>.item{
        width: 100px;
        height: 100px;
        float: left;
    }
    .box>.item:nth-child(even){
        background-color: deeppink;
    }
    .box>.item:nth-child(odd){
        background-color: lightseagreen;
    }
</style>
<div class="box clearfix">
    <div class="item">第一项</div>
    <div class="item">第二项</div>
    <div class="item">第三项</div>
    <div class="item">第四项</div>
</div>

这个时候表现的效果图如下

现在需要让这四项元素居中，怎么办？？？？

🤔 思路：浮动的元素因为不遵守标准的布局规范，所以我们考虑的重点就不能放在item的元素上面，但是它的父级box元素是没有浮动的，所以它是一个标准的布局规范，所以我们可以在这个元素上面做思路

.box {
    border: 2px solid red;
    width: 400px;
    margin: auto; 
}

当我们设置上面的代码以后，元素整体居中了。但是我们要思考另一个问题，这个width:400px是哪来的？是我们自己设置的，但是如果内部元素的宽度发生了变化，这个地方就要同步的发生变化，这很麻烦，所以在这里我们是不能把这400px宽度设置死的

经过思考，box的宽度应该是里面浮动元素的宽度的总和，所以我们可以把当前这个元素转换成行内块级元素，因为行内块级元素的宽度是由里面的内容去撑开的

第一种解决方案

<style>
	.outerBox{
        text-align: center;
    }
    .box {
        border: 2px solid blue;
        display: inline-block;
    }
    /*省略了部分代码.......*/
</style>
<div class="outerBox">
    <div class="box clearfix">
        <!-- 省略了部分代码 -->
    </div>
</div>

第二种解决方案

我们之前无论是改变外层的元素类型为inline-block或手动设置宽度，其实都是为了让内部元素的宽度总和等于外部元素

这一种解决方案其实也是让外层元素box的宽度由内容决定，但是不改变外层元素box类型。这个时候就要使用到一个width的新的属性值fit-content,这个属性值可以让块级元素的宽度由内容撑开，但又不改变元素的类型

.box {
    border: 2px solid blue;
    /*当前元素的宽度由内容去撑开*/
    width: fit-content;
    /* 块级元素的居中规范 */
    margin: auto;
}

脱流的影响

目前造成脱流的方试有浮动与定位，一个元素脱流以后会有如下的影响

脱流的元素不在占用原来的位置，会造成父级元素的高度坍塌
脱流的元素高于标准文档流一个Z轴层级
脱流以后的元素无视元素类型，通通都会变成block块级元素状态
脱流以后的元素会照成宽度丢失，宽度不再是默认是100%，而是由里面的内容去撑开（但是仍然可以通过width重新设置宽度）
脱流以后的元素会形成BFC（也就是说脱流以后的元素没有margin的折叠与穿透现象）
脱流以后的元素不再适用于标准流布局里面的任何居中规范

目录CONTENT

浮动

浮动

浮动的现象

浮动的影响

清除浮动的影响

浮动元素的居中方案

脱流的影响

评论区