css浮动

最新推荐文章于 2025-05-27 21:13:42 发布

磁悬浮电冰箱

最新推荐文章于 2025-05-27 21:13:42 发布

阅读量54

点赞数

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/weixin_64776610/article/details/131771112

版权

css浮动1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        /* 脱离标准文档流
        影响 破坏额布局 到布局错乱
        2.不脱离文档流 */

        /* 
        规范：

            同级之间加float属性其余的也要加
        */
        .div1{
            width: 50px;
            height: 101px;
            background-color: pink;
            float: left;
        }
        .div2{
            width: 500px;
            height: 102px;
            background-color: green;
            float: left;
        }
        .div3{
            width: 550px;
            height: 101px;
            background-color: yellow;
            float: left;
        }
        .div4{
            width: 200px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

    </style>
</head>
<body>
    <div class="div1">1111111111</div>
    <div class="div2">2222222222</div>
    <div class="div3">3333333333</div>
    <div class="div4">4444444444</div>
</body>
</html>

css浮动2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            border: 5px solid red;
            list-style: none;
            /* height 102px */
            /* 溢出隐藏 */
            /* overflow：hidden */

        }
        /* ul::after{
            content'';
            dispaly:block;
            clear:;
        } */
        li{
            /* width: 100px; */
            height: 300px;
            border: 1px solid #000;
            float: left;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* 浮动导致 父级盒子塌陷
        
        解决办法：
             1.父级盒子加高（不能自动撑开高是固定的不够灵活）
             2.父级盒子加overflow：hidden;（自动撑开，但会导致溢出的部分无法显示）
             3.加一个无内容的空盒子1：clear：both;(必须无意无宽高)
             4.父盒子加伪类属性： ::after{conter：''
                                         display: block;
                                        clear:both  } (达到添加无意义空盒子效果且不受影响)      */
        .clearfix::after{
            content:'' ;
            display: block;
            clear: both;

        }
        .clear::after{
            content: '';
            display: block;
            clear: both;
        }    
        .box{
            width: 50px;
            height: 50px;
            border: 1px solid yellow;
            float: left;
        }
    </style>
</head>
<body>
    <ul class="clear">
        <li>这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字这里有好多字</li>
        <li>
            <ul class="clear">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
            </ul>
        </li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div></div>
</body>
</html>