浮动-第十一天

浮动

  • 浮动元素会脱离标准流,不占用之前的位置

  • 浮动的元素(脱标)具有行内会元素的特点(一行显示多个,可以设置宽高)

  • 找到边缘才会停止,顶部对齐

  • 浮动的元素只会影响下面的标准流

  • 一浮全浮:兄弟元素只要有一个浮动了,其他兄弟都要添加浮动

    • <!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>
</head>
<style>
    body {
       width: 1226px;
       height: 400px;
       border: 10px solid tomato;
    }
    .left{
        float: left;
        width: 234px;
        height: 400px;
        background-color:orange ;
    }
    .right{
        float: left;
        width:992px ;
        height: 400px;
        background-color: skyblue;
    }
</style>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

  • 浮动元素经常搭配标准流的父元素一起使用

    • 浮动案例

    • <!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1226px;
            height: 285px;
            border: 10px solid orange;
            margin: 100px auto;
        }
        li{
            float: left;
            /* 清除小圆点 */
            list-style: none;
             width: 296px;
             height: 285px;
             background: skyblue;
             margin-right: 14px;
        } 
        li:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
     <div class="box">
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>
     </div>
</body>
</html>
posted @ 2022-04-08 00:33  我爱打码  阅读(27)  评论(0)    收藏  举报