5.浮动

什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

标准文档流下有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动

举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .box1{
            100px;
            height:100px;
            background-color:red;
            float:left
        }

        .box2{
            200px;
            height:200px;
            background-color:green;
            float:right
        }
    </style>
</head>
<body>

那么浮动如果大家想学好，一定要知道它的四大特性

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素由"字围"效果

4.收缩的效果

浮动元素脱标

脱标：就是脱离了标准文档流

看例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">

        .box1{
            100px;
            height:100px;
            background-color:red;
            float:left;

        }

        .box2{
            200px;
            height:200px;
            background-color:green;
         }
        span{
            background-color:blue;
            float:left;
　　　　　　　  300px;           
　　　　　　   height: 50px;


        }
    </style>

</head>
<body>

    <div class="box1">小红</div>
    <div class="box2">小绿</div>

    <span>span标签</span>
    <span>span标签</span>

</body>
</html>

脱标 ：脱离了标准流
小红盒子浮动，脱离标准流，此时小黄盒子就是标准文档第一个
所以，渲染了左上方，

所有标签一旦设置浮动，能够并排都不区分
行内／块状元素 设置宽高

浮动元素互相贴靠

看例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素互相贴靠</title>
    <style type="text/css">
        .box1{
            100px;
            height:400px;
            float:left;
            background-color:red;
        }

        .box2{
            150px;
            height:250px;
            float:left;
            background-color:blue;
            }

        .box3{
            300px;
            height:300px;
            float:left;
            background-color:green;
            }
    </style>
</head>
<body>

     <div class="box1">1</div>
     <div class="box2">2</div>
     <div class="box3">3</div>

</body>
</html>

效果发现：

如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

浮动元素字围效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字围效果</title>
    <style type="text/css">

        div{
            float:left;
        }
    </style>
</head>
<body>
 
    <div>
        <img src="./timg.jpeg">
    </div>
    <p>
        dafdsaddsajfdjalkfjdg
        ajgldjaglkdjaljgdlskajgldjfs
        hdfj大家放大法律买垃圾哦dafldfjlasd发
        dafdsaddsajfdjalkfjdg ajgldjaglkdjaljgdlskajgldjfs hdfj
        大家放大法律买垃圾哦dafldfjlasd发 放大放大放大个发
        dafdsaddsajfdjalkfjdg
        ajgldjaglkdjaljgdlskajgldjfs
        hdfj大家放大法律买垃圾哦dafldfjlasd发
        dafdsaddsajfdjalkfjdg ajgldjaglkdjaljgdlskajgldjfs hdfj
        大家放大法律买垃圾哦dafldfjlasd发 放大放大放大个发
        个撒发顺丰果然各方面都怕放大放大
        撒发顺丰果然各方面都怕放大放大放大个发个撒发顺丰果然各方面都怕
    </p>

</body>
</html>

浮动元素紧凑效果

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            float:left;
            background-color:red;
        }
    </style>
</head>
<body>

</body>
    <div>alex</div>
</html>

清除浮动

在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）

大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。

看一个效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动带来的问题</title>
    <style type="text/css">

        .father{
            /*子盒子浮动，父盒子一般不设置高度
            出现这种问题  我们要清除浮动带来的影响*/

            1226px;
            /*height:300px;*/
            background-color:yellow;
        }

        .box1{
            100px;
            height:400px;
            background-color:red;
            float:left;
        }

        .box2{
            200px;
            height:300px;
            background-color:green;
            float:left;

        }

        .box3{
            300px;
            height:200px;
            background-color:blue;
            float:left;
        }
         .father2{
            1226px;
            height:400px;
            background-color:purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <div class="father2">
    </div>
</body>
</html>

效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。

那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动

还好还好。我们有多种清除浮动的方法，在这里给大家介绍四种：

给父盒子设置高度
clear:both
伪元素清除法
overflow：hidden

给父盒子设置高度

这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

clear：both

内墙法：给浮动元素最后面加一个空的div 并且该元素不浮动
然后设置clear:both  清除被对我的浮动影响
这个方法结构冗余

伪元素清除法(常用)

给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}

overflow:hidden(常用)

overflow属性规定当内容溢出元素框时发生的事情。

说明：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

有五个值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

逐渐演变成overflow：hidden清除法。

其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522

到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕，大家一定要熟记于心。