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

最新推荐文章于 2022-03-31 19:07:29 发布

WindFromFarEast

最新推荐文章于 2022-03-31 19:07:29 发布

阅读量575

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xwx617/article/details/79088102

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
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都不浮动就是根据块级元素的特性进行换行。上面代码的效果如下所示：
这里写图片描述
还需要注意的是，拥有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>

这里写图片描述
这样我们就成功利用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>

这里写图片描述
既然有塌陷那么我们就必须找到解决塌陷的办法，解决塌陷的办法一共有四种：

（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的显示是正常换行的。
这里写图片描述
那么我们到底如何利用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>

这里写图片描述

（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>

这里写图片描述

到这里我们浮动的基本知识就学习完毕了，最后使用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">
            <!--logo图片-->
            <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>

这里写图片描述

WindFromFarEast

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识（三）——浮动float

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

扫一扫

专栏目录