当前位置: 首页> 健康> 美食 > PC布局-浮动布局

PC布局-浮动布局

时间:2025/7/14 4:52:42来源:https://blog.csdn.net/qq_67896626/article/details/139074704 浏览次数:0次

一:浮动是什么

  1. 什么是浮动

    1. 用于创建浮动框,将设置浮动元素移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框边缘。
  2.     <style>.box1{width: 500px;height: 200px;background-color: blue;float: left;}.box2{width: 500px;height: 200px;background-color: red;float: left;}</style>
    </head>
    <body><div class="box1"></div><div class="box2"></div>
    </body>

            浮动解释:

    1. 即两个设置了浮动的盒子会紧密连接在一起上面例子,因为都设置了float:left

    2. 其他形式浮动:设置了浮动的盒子触及了“浏览器”/父级元素边缘(包含块)

  3. 浮动语法:

    1. float:left/right/none

二:浮动特点

  1. 脱离标准流

  2. 具有行内块元素的特性,因此会在一行内显示,并且会紧密挨着没有空隙

    1. 行内块元素的特性,可给元素设置宽高,但元素不单独占据一行

    2. 块元素,如果不设置宽度,默认和父级元素一样宽;但是设置了浮动,则根据元素内容设置宽度

关键字:PC布局-浮动布局

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: