17.浮动

<meta charset="UTF-8">
    <title>浮动</title>
    <style>
        *{margin: 0px;padding: 0px}
        .box{
            width: 395px;
           /* height: 400px;*/
            border-style: solid;
            border-color: indianred;
            border-width: 1px;
            margin: 20px auto;
            padding: 50px;
            overflow:hidden;
        }
        .subbox{
            width: 100px;
            height: 100px;

        }
        .bg1{
            background-color: teal;
        }
        .bg2{
            background-color: red;
        }
        .bg3{
            background-color: green;
        }
        .bg4{
            background-color: black;
        }
        .bg5{
            background-color: cadetblue;
        }
        .bg6{
            background-color: blue;
        }
        .bg7{
            background-color: darkorange;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
       /* .clear{
            clear: both;
            width: 0px;
            height: 0px;
            display: block;
        }*/
    </style>
</head>
<body>
        <div class="box">
            <div class="subbox bg1 left"></div>
            <div class="subbox bg2 left"></div>
            <div class="subbox bg3 left"></div>
            <div class="subbox bg4 left"></div>
            <div class="subbox bg5 left"></div>
            <div class="subbox bg6 left"></div>
            <div class="subbox bg7 left"></div>
            <!--<div class="clear"></div>
-->
        </div>



<!--
浮动: 让块元素可以同行显示
    浮动属性: float, 属性值: left, right, none
    浮动效果:
        1) 脱离文档流
        2) 元素垂直位置高于文档流元素
        3) 向父元素的左/右上角移动
        4) 碰到父元素边界或其它浮动元素后停止

    浮动效果带来的问题: 父元素边框塌陷
        解决办法:
            1) 设置固定的高度. 不推荐
            2) 使用clear属性清除浮动问题
                步骤:
                    i. 在父元素末尾添加一个没有任何显示效果的块元素
                    ii. 为这个块元素添加clear属性, 值通常为both
            3) 使用overflow属性清除浮动问题
                步骤:
                    在父元素中添加overflow属性, 值为hidden

display属性: 设置元素的显示格式
    值:
        1) inline: 元素按照内联格式显示
        2) block: 元素按照块格式显示
        3) inline-block: 行级块元素
        4) none: 不显示(隐藏). 也不保留文档流位置
visibility属性: 设置元素显示/隐藏
    值:
        1) visible: 显示
        2) hidden: 隐藏. 元素保留文档流位置
overflow属性: 元素内容溢出效果设置
    值:
        1) visible: 默认, 显示
        2) hidden: 隐藏, 常用
        3) auto: 自动调整, 常用
        4) scroll: 添加滚动轴

文档流: 按照标签的加载顺序自动形成元素队列
-->

</body>
posted on 2022-04-07 17:39 小小程序猿level1 阅读(29) 评论(0) 收藏举报