CSS基础知识（三）——浮动float

本是古典何须时尚 2022-06-01 02:26 265阅读 0赞

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。  
float属性一共有四个参数：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承父元素的浮动属性）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *
            {
                /*取消所有的内外边距*/
                padding: 0;
                margin: 0;
            }
            .test
            {
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;/*不加左浮动两个div就会换行排列，加上就会水平排列；并且左浮动和右浮动的元素排列顺序是对称的*/
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="test">1</div>
        <div class="test">2</div>
    </body>
    </html>

在上面的代码中我设置了两个左浮动的div，当两个div同时具有浮动属性时，他们就不会和一般的div一样换行，他们会按照水平排列。但是如果一个div浮动一个div不浮动的话，就会产生两个div的重叠效果，若是两个div都不浮动就是根据块级元素的特性进行换行。上面代码的效果如下所示：  
![这里写图片描述][SouthEast]  
还需要注意的是，拥有float属性的元素将会成为块级元素，例如span是内联元素，这个元素不能通过赋与其width和height属性来占据空间，但是如果在css样式中为span元素声明了float属性后，span元素就会被强制转换为块级元素，此时width和height属性就可以生效了。

接下来我们来利用float实现一个文字环绕图片的效果，这里可能有人会有疑问，不是说有float属性的元素会脱离正常的文档流进行排列吗，那么按照这种说法文字不是会和图片重合吗？这里我们需要知道，当给元素设置了float属性的时候，元素会脱离正常文档流的排列方式，但浮动的元素虽然脱离了正常的文档流，但依然占据文档流的空间，所以文档流无法和设置了float属性的元素重合，因此就能实现文字环绕图片的效果了。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style>
            .per
            {
                width: 400px;
                height: 400px;
                border: 1px solid #ccc;
            }
            img
            {
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="per">
            <img src="logo.png" width="200"/>
            慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
            慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
            慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。 慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。 慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。 慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。
        </div>
    </body>
    </html>

![这里写图片描述][SouthEast 1]  
这样我们就成功利用float实现了文字环绕图片的效果了。

浮动有好处自然也有弊端，其中最常见的弊端就是父元素塌陷。举个例子，我们为一个父元素的height声明为auto，意思就是这个父元素的高度由其包含的子元素决定，这时如果我们为其子元素声明了float属性，那么这个子元素将跳出正常的文档流排列方式，此时父元素无法获取到子元素的高度，那么父元素的高度为0，这就造成了塌陷。  
下面就是一个塌陷的代码实例

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                *
                {
                    margin: 0;
                    padding: 0;
                }
                .per
                {
                    width: 500px;
                    height: auto;
                    border: 1px solid #000000;
                }
                .test
                {
                    width: 80px;
                    height: 30px;
                    background: red;
                    border: 1px solid #FFFFFF;
                    float: left;/*由于子元素设置了浮动属性，所以脱离了正常的标准流布局，导致高度设置了auto的父元素per无法检测子元素高度发生了坍塌*/
                }
                .bro
                {
                    width: 100px;
                    height: 100px;
                    background: blue;
                }
            </style>
        </head>
        <body>
            <div class="per">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
            <div class="bro"></div>
        </body>
    </html>

![这里写图片描述][SouthEast 2]  
既然有塌陷那么我们就必须找到解决塌陷的办法，解决塌陷的办法一共有四种：  
![这里写图片描述][SouthEast 3]  
（1）、手动为父元素的高度赋值  
这种方法最简单，但是在开发过程中非常不实用，当子元素的高度发生变化后，我们无法预料到子元素的高度是否会超出父元素造成页面混乱，因此不推荐。  
（2）、clear属性  
clear：left不允许元素左边有浮动对象  
clear：right不允许元素右边有浮动对象  
clear：both不允许元素两侧有浮动对象  
clear：inherit继承父类元素clear的值

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .div1
                {
                    width: 100px;
                    height: 100px;
                    background: red;
                    float: left;
                }
                .div2
                {
                    width: 120px;
                    height: 120px;
                    background: blue;
                    clear: left;/*不允许左边有浮动元素，因此div2正常显示，但是div1还是在原位，只是让div2正常显示了而已*/
                }
                .per
                {
                    width: 200px;
                    height: 400px;
                    border: 1px solid #CCC;
                }
            </style>
        </head>
        <body>
            <div class="per">
                <div class="div1"></div>
                <div class="div2"></div>
            </div>
        </body>
    </html>

通过我们之前学习的知识可以知道，当一个div有浮动另一个div没有的情况下（默认是相邻兄弟元素），两个div会发生重叠；两个div都有浮动属性的话，两个div会进行水平排列而不换行，但是在上面的代码中我们发现我们为div2声明了clear:left属性，禁止了其左边有浮动元素，因此div2的显示是正常换行的。  
![这里写图片描述][SouthEast 4]  
那么我们到底如何利用clear进行塌陷的处理呢？最常用的办法就是在所有浮动子元素的最后加上一个空白的子元素，并为其声明clear：both，这种方法的原理就是这个空白的子元素会因为clear：both的限制强行换行，但是因为空白元素高宽均为0所以其只是换行到了前面子元素的高度处，由于这个空白元素不是浮动的，所以父元素能检测到这个高度，塌陷解决。

（3）、overflow和zoom搭配使用

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .per
                {
                    width: 500px;
                    height: auto;
                    border: 1px solid #000;
                    /*overflow和zoom搭配使用解决父元素塌陷*/
                    overflow: hidden;/*overflow用来修剪溢出元素，若将子元素test的长度改为1000，那么在屏幕上显示的依然是父元素的500*/
                    zoom: 1;/*IE专用属性 通过子元素的高度来放大/缩小父元素的高度 使得父元素拥有了高度*/
                }
                .test
                {
                    width: 100px;
                    height: 30px;
                    background: red;
                    border: 1px solid #fff;
                    float: left;/*高度为auto的父元素塌陷*/
                }
            </style>
        </head>
        <body>
            <div class="per">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
        </body>
    </html>

![这里写图片描述][SouthEast 5]

（4）、给父元素添加浮动

<!DOCTYPE html>
    <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <style>
                    .per
                    {
                        width: 500px;
                        height: auto;
                        border: 1px solid #000000;
                        float: left;/*为父元素添加浮动效果解决塌陷问题*/
                    }
                    .test
                    {
                        width: 100px;
                        height: 30px;
                        background: red;
                        border: 1px solid #ffffff;
                        float: left;/*导致高度为auto的父元素塌陷*/
                    }
                </style>
        </head>
        <body>
            <div class="per">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
        </body>
    </html>

![这里写图片描述][SouthEast 6]

到这里我们浮动的基本知识就学习完毕了，最后使用float的知识完成一个慕课网的导航栏，注意div的分层思想。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                *
                {
                    padding: 0;
                    margin: 0;
                }
                .head
                {
                    width: 100%;
                    height: 64px;
                    background: lightgreen;
                }
                .logo
                {
                    width: 160px;
                    height: 40px;
                    float: left;
                    margin-top: 12px;
                }
                .nav
                {
                    width: 320px;
                    height: 64px;
                    float: left;
                }
                .nav-li
                {
                    width: 80px;
                    height: 64px;
                    text-align: center;
                    line-height: 64px;
                    color: #333333;
                    float: left;
                }
                .icons
                {
                    width: 320px;
                    height: 64px;
                    float: right;
                    padding-right: 10px;
                }
                .i01
                {
                    width: 64px;
                    height: 64px;
                    background-image: url("001.png");
                    background-position: center;/*让图片居中显示*/
                    background-repeat: no-repeat;
                    float: left;
                }
                .i02
                {
                    width: 64px;
                    height: 64px;
                    background-image: url("002.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    float: left;
                }
                .i03
                {
                    width: 64px;
                    height: 64px;
                    background-image: url("003.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    float: left;
                }
                .i04
                {
                    width: 64px;
                    height: 64px;
                    background-image: url("004.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    float: left;
                }
                .i05
                {
                    width: 64px;
                    height: 64px;
                    background-image: url("005.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    float: left;
                }
            </style>
        </head>
        <body>
            
            <div class="head">
                
                <div class="logo">
                    <img src="logo.png" width="160" height="40"/>
                </div>
                
                <div class="nav">
                    <div class="nav-li">实战</div>
                    <div class="nav-li">路径</div>
                    <div class="nav-li">猿问</div>
                    <div class="nav-li">手记</div>
                </div>
                
                <div class="icons">
                    <div class="i01"></div>
                    <div class="i02"></div>
                    <div class="i03"></div>
                    <div class="i04"></div>
                    <div class="i05"></div>
                </div>
            </div>
        </body>
    </html>

![这里写图片描述][SouthEast 7]

[SouthEast]: /images/20220601/7be0f6c5c72c4e9286496bb3e3c1d1f8.png
[SouthEast 1]: /images/20220601/15428bac8ee747058f118eda22858056.png
[SouthEast 2]: /images/20220601/13c459695f6044d2928a93ebfa92bc49.png
[SouthEast 3]: /images/20220601/08f8a40c83754ee1be8bf730cb102830.png
[SouthEast 4]: /images/20220601/925b276e023445ffb98f919baf886c0c.png
[SouthEast 5]: /images/20220601/24b4555b7e404e3dad89513a1d273451.png
[SouthEast 6]: /images/20220601/014383600a0d497f9a55b0ee160c84a4.png
[SouthEast 7]: /images/20220601/e22000c99e964a36b82fa167e16c1d44.png