float

最新推荐文章于 2023-06-09 09:21:23 发布

-Yii

最新推荐文章于 2023-06-09 09:21:23 发布

阅读量76

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/Youthenen/article/details/115769661

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            background-color: blue;
            height: 30px;
            width: 100px;
            float: left;
        }

        .right {
            background-color: pink;
            /* float: left; */
        }
    </style>
</head>

<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>

在这里插入图片描述
如图，这里的left脱离了文档流，顶到了容器的边框。而则right处于正常的文档流中。
若设置right也为float，则right的边缘会顶到另外一个浮动的元素left。

  .right {
            background-color: pink;
            float: left; 
        }

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

-Yii

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 <style> * { margin: 0; padding: 0; } .left { background-color: blue; height: 30px; width: 100px;
复制链接

扫一扫