欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS基础知识(三)——浮动float

程序员文章站 2024-01-28 09:44:16
...

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
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都不浮动就是根据块级元素的特性进行换行。上面代码的效果如下所示:
CSS基础知识(三)——浮动float
还需要注意的是,拥有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>

CSS基础知识(三)——浮动float
这样我们就成功利用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>

CSS基础知识(三)——浮动float
既然有塌陷那么我们就必须找到解决塌陷的办法,解决塌陷的办法一共有四种:
CSS基础知识(三)——浮动float
(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的显示是正常换行的。
CSS基础知识(三)——浮动float
那么我们到底如何利用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>

CSS基础知识(三)——浮动float

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

CSS基础知识(三)——浮动float

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

CSS基础知识(三)——浮动float