Web前端学习笔记6（浮动）

最新推荐文章于 2022-08-02 20:58:05 发布

MYH永恒

最新推荐文章于 2022-08-02 20:58:05 发布

阅读量531

点赞数

分类专栏： Web前端文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/Mu_yongheng/article/details/113803993

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在大致学习完布局之后，现在开始了解下一个知识点：浮动！浮动，字面意思就是使元素浮起来，从而完成元素的布局。

知识点学习

浮动有很多特点以及使用，下面分为几个点来分别学习。

1、浮动的简介

通过浮动可以使一个元素向其父元素的左侧或者右侧移动就是浮动最基本的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: royalblue;

            /* 
                通过浮动可以使一个元素向其父元素的左侧或者右侧移动
                    使用float 属性来设置元素的移动
                        可选值：
                            none 默认值，元素不浮动
                            left 元素向左浮动
                            right 元素向右浮动

                    注意：设置浮动以后，水平布局的等式便不需要强制成立
                        元素设置浮动以后，会完全从文档流中脱离，不再占用文档流中的位置
                            所以元素下边的还在文档流中的元素会自动向上移动

                    浮动的特点：
                        1、浮动元素会脱离文档流，不占用文档流中的位置
                        2、设置浮动以后，元素会向左侧或者右侧移动
                        3、浮动元素默认不会从父元素中移出
                        4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素

                    简单总结：
                        浮动目前来讲它的作用就是让页面中的元素可以水平排列，
                            通过浮动可以制作一些水平方向的布局
             */
            float: left;
        }

        .box2{
            width: 300px;
            height: 300px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    
</body>
</html>

2、浮动的其他特点

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 
                浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，
                    所以我们可以利用浮动来设置文字环绕图片的效果    
            */
            float: left;
        }

        .box2{
            background-color: yellow;
            
            /* 
                元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

                脱离文档流的特点：
                    块元素：
                        1、块元素不会独占一行
                        2、脱离文档流以后，块元素的宽度和高度默认被内容撑开

                    行内元素：
                        行内元素脱离文档流以后会变成块元素，特点和块元素一样

                    脱离文档流以后，就不用区分块元素和行内元素了
             */
            float: left;
        }

        .box3{
            background-color: violet;
        }

        .s1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }


    </style>
</head>
<body>
    
    <div class="box1"></div>
    <p>
        “周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。

　　久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”

　　周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”

　　周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。

　　周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。

　　周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”(励志名言大全 www.wenzhangba.com)

　　陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。

　　此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。

　　后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。

　　周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。
    </p>

    <div class="box2">hello</div>
    <div class="box3">hello</div>

    <span class="s1">我是一个span</span>
</body>
</html>

3、网页的布局

在日常生活中的网页布局，很多都是利用浮动来实现的，下面的一个简单的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的简单布局</title>

    <style>
        header{
            width: 1000px;
            height: 150px;
            background-color: bisque;
            margin: 0 auto;
        }

        main{
            width: 1000px;
            height: 500px;
            background-color: rgb(155, 224, 15);
            margin: 10px auto;
            
        }

        nav{
            width: 190px;
            height: 100%;
            background-color: yellow;
            float: left;
        }

        article{
            width: 600px;
            height: 100%;
            background-color: teal;
            float: left;
            margin: 0 10px;
        }

        aside{
            width: 190px;
            height: 100%;
            background-color: pink;
            float: left;
        }

        footer{
            width: 1000px;
            height: 150px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    
    <!-- 创建头部 -->
    <header></header>

    <!-- 创建主体 -->
    <main>
        <!-- 左侧导航 -->
        <nav></nav>

        <!-- 中间的内容 -->
        <article></article>

        <!-- 右侧的边栏 -->
        <aside></aside>
    </main>

    <!-- 创建尾部 -->
    <footer></footer>
</body>
</html>

4、高度塌陷问题

在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后其会完全脱离文档流，将无法撑起父元素的高度，这就是高度塌陷的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            border: 10px red solid;

            /* 
                BFC(Block Formatting Context)块级格式化环境
                    - BFC是CSS中一个隐含的属性，可以为一个元素开启BFC
                        开启BFC该元素会成为一个独立的布局区域
                    - 元素开启BFC的特点：
                        1、开启BFC的元素不会被浮动元素所覆盖
                        2、开启BFC的元素子元素和父元素外边距不会重叠
                        3、开启BFC的元素可以包含浮动的元素

                    - 可以通过一些特殊的方式开启元素的BFC：
                        1、设置元素的浮动（不推荐）
                        2、将元素设置为行内块元素（不推荐）
                        3、将元素的overflow设置为一个非visible的值
                            - 常用的方式，为元素设置 overflow: hidden 开启BFC 以使其可以包含浮动元素
             */
             /* float: left; */
             /* display: inline-block; */
             overflow: hidden;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: aqua;

            /* 
                高度塌陷问题：
                    在浮动布局中，父元素的高度默认被子元素撑开，
                        当子元素浮动后其会完全脱离文档流，将无法撑起父元素的高度

                    父元素高度丢失以后，其下元素会自动上移
             */
            float: left;
        }
    </style>
</head>
<body>
    
    <div class="outer">
        <div class="inner"></div>
    </div>

</body>
</html>

5、BFC的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfc;
            /* float: left; */
            overflow: hidden;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: brown;
            overflow: hidden;
        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    
    <div class="box1">

        <div class="box3"></div>
        
    </div>

    <!-- <div class="box2">

    </div> -->
</body>
</html>

6、clear

通过clear清除浮动元素对当前元素产生的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 50px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfc;
            float: left;
        }

        .box2{
            width: 400px;
            height: 400px;
            background-color: tomato;
            float: right;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 
                由于box1的浮动，导致box3位置上移

                如果我们不希望某个元素因为其他元素浮动的影响而改变位置，
                    可以通过clear 属性来清除浮动元素对当前元素所产生的影响

                clear
                    - 作用：清楚浮动元素对当前元素产生的影响
                    - 可选值：
                        left 清除左侧浮动元素对当前元素的影响
                        right 清除右侧浮动元素对当前元素的影响
                        both 清除两侧最大影响的那一侧

                    原理：
                        设置清除浮动以后，浏览器会自动为元素添加一个 外边距，
                            使其位置不受其他元素的影响
             */

             clear: both;
        }
    </style>
</head>
<body>

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

7、after伪类解决高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            border: 10px red solid;

            /* overflow: hidden; */

        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: turquoise;
            float: left;
        }

        /* 通过after伪元素来解决 */

        .box1::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
    
</body>
</html>

8、clearfix

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时，直接使用这个类即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: turquoise;
        }


        /* 解决外边距重合 */
        /* .box1::before{
            content: '';
            display: table;
        } */

        .box2{
            width: 100px;
            height: 100px;
            background-color: wheat;
            margin-top: 100px;
        }


        /* 
            clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时，直接使用这个类即可
            这个类用来解决 高度塌陷 和 外边距重合
            记下来
         */
        .clearfix::before, 
        .clear::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>

</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

9、导航条练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            margin: 0;
            padding: 0;
            /* 去除项目符号 */
            list-style: none;
            margin-left: 20px;
        }
        
        .nav{
            width: 1205px;
            height: 48px;
            background-color: #E8E7E3;

            margin: 100px auto;
        }

        

        .nav li{
            float: left;
            line-height: 48px;

        }

        .nav a{
            display: block;
            text-decoration: none;
            color: #777777;
            font-size: 18px;

            padding: 0 39px;

        }

        .nav a:hover{
            background-color: #3f3f3f;
            color: #e8e7e3;
        }
    </style>
</head>

<body>
    <!-- 创建导航条的结构 -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
    
</body>
</html>