Web全栈工程师之路(二)——CSS篇(五)——布局——浮动

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3初识(五)布局——浮动</title>
    <style>
        .list > div:nth-child(2n+1){
            width: 100px;
            height: 100px;
        }
        .list > div:nth-child(2n){
            width: 150px;
            height: 150px;
        }
        .box1{
            background-color: #bbffaa;
        }
        .box2{
            background-color: blueviolet;
            float: left;
        }
        .box3{
            /*box3没有浮动上去的原因是因为box2将一行内容全部占据(要满足等式要求)*/
            background-color: orange;
            float:left
        }
        .box4{
            background-color: pink;
            float: right;
        }
        .box5{
            background-color: yellowgreen;
            float: left;
        }
        .box6{
            background-color: burlywood;
        }
        /*
            通过浮动可以使一个元素向其父元素的左侧或右侧移动，脱离了文档流
            float(浮动属性)：
                可选值：
                    none：默认值，元素不浮动
                    left：元素向左浮动
                    right：元素向右浮动

                元素设置浮动以后，水平布局的等式便不需要强制成立(等式详见布局——盒子模型初识一章)

                元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置所以下方元素会自动向上移动

                特点：
                    1、浮动元素会完全脱离文档流，不再占据文档流中的位置
                    2、设置浮动以后元素会向父元素的左侧或右侧移动
                    3、浮动元素默认不会从父元素中移除
                    4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
                    5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
                    6、浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高(见图)，想上到顶部去可以把两个盒子交换位置(见图)

                其他特点：
                    1、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
                    2、元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

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

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

                    脱离文档流后就不用再区分块与行了
         */
    </style>
</head>
<body>
    <div class="list">
        <div class="box1">盒子1</div>
        <div class="box4">盒子4</div>
        <div class="box2">盒子2</div>
        <div class="box3">盒子3</div>
        <p>
            《道德经》全文
            【第一章】道可道，非常道；名可名，非常名。无名天地之始，有名万物之母。故常无欲，以观其妙；常
            有欲，以观其徼（jiào）。此两者同出而异名，同谓之玄，玄之又玄，众妙之门。〖译文〗
            【第二章】天下皆知美之为美，斯恶（è）已；皆知善之为善，斯不善已。故有无相生，难易相成，长短相
            较，高下相倾，音声相和（hè），前后相随。是以圣人处无为之事，行不言之教，万物作焉而不辞，生而
            不有，为而不恃，功成而弗居。夫（fú）唯弗居，是以不去。 〖译文〗
        </p>
    </div>

    <div class="box5">盒子5</div>
    <div class="box6">盒子6</div>


</body>
</html>
Web全栈工程师之路(二)——CSS篇(五)——布局——浮动

猜你喜欢
