浮动的最初用法

最新推荐文章于 2024-08-27 20:48:47 发布

Yrain--

最新推荐文章于 2024-08-27 20:48:47 发布

阅读量41

点赞数

分类专栏：一些前端知识文章标签： html css 前端

本文链接：https://blog.csdn.net/westttt56/article/details/129962411

版权

一些前端知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浮动布局是很常见的一种布局，我们基本上都知道当元素开启浮动后会脱离文档流，相邻兄弟元素会受浮动影响进行位置偏移

例如

 <style>
      .box1{
        background-color: rgb(53, 20, 201);
        width: 300px;
        height: 300px;
        float: left;
      }
      .box2{
        background-color: brown;
        width: 200px;
        height: 200px;
       
      }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>

    
</body>

这里下面的box2就因为浮动影响跑到了box1下面

但是当box2里面有文本内容的的时候，就会发生文字环绕

<style>
      .box1{
        background-color: rgb(53, 20, 201);
        width: 300px;
        height: 300px;
        float: left;
      }
      .box2{
        background-color: brown;
        width: 200px;
        height: 200px;
       
      }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2">ssdsadasdasdasdad</div>

    
</body>

发生这种情况的原因其实是因为浮动最早就是被用于文字环绕，所以文字并没有被覆盖掉

Yrain--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
浮动的最初用法

浮动布局是很常见的一种布局，我们基本上都知道当元素开启浮动后会脱离文档流，相邻兄弟元素会受浮动影响进行位置偏移。发生这种情况的原因其实是因为浮动最早就是被用于文字环绕，所以文字并没有被覆盖掉。但是当box2里面有文本内容的的时候，就会发生文字环绕。这里下面的box2就因为浮动影响跑到了box1下面。
复制链接

扫一扫