欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【web前端-CSS】关于浮动

程序员文章站 2022-03-05 21:42:31
...

关于浮动的一些特点

  • 浮动元素会完全脱离文档流，不再占用文档流的位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于浮动</title>

    <style>
        .boxOne{
            width: 300px;
            height: 200px;
            background-color: lightcoral;
            border: 10px rgb(207, 120, 128) inset;
            float: left;
        }

        .boxTwo{
            width: 400px;
            height: 300px;
            background-color: lightpink;
            border: 10px pink inset;
        }
    </style>
</head>
<body>
    <div class="boxOne"></div>
    <div class="boxTwo"></div>
</body>
</html>

【web前端-CSS】关于浮动

  • 浮动元素不会超过它上边的兄弟元素，垂直方向上，最多与前面的浮动元素同等高度

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于浮动</title>

    <style>
        .boxOne{
            width: 300px;
            height: 200px;
            background-color: lightcoral;
            border: 10px rgb(207, 120, 128) inset;
            float: left;
        }

        .boxTwo{
            width: 300px;
            height: 200px;
            background-color: lightpink;
            border: 10px pink inset;
            float: left;
        }

        .boxThree{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            border: 10px inset lightskyblue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="boxOne"></div>
    <div class="boxTwo"></div>
    <div class="boxThree"></div>
</body>
</html>

效果图
【web前端-CSS】关于浮动

相关标签： web学习笔记 css html

上一篇： 酷冷至尊7000元旗舰电源内部设计图赏:华丽堆料

下一篇： 机箱哪个牌子好？2018十大机箱品牌推荐排行

推荐阅读