2021.01.25浮动的使用

最新推荐文章于 2021-11-02 21:03:28 发布

at呆呆酱

最新推荐文章于 2021-11-02 21:03:28 发布

阅读量65

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_54087529/article/details/113531877

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width:500px;
            height:500px;
            background-color:pink;
        }
        .box1{ 
            width:100px;
            height:100px;
            background-color:green;
            float: left;
         }
         .box2{
             width:150px;
             height:150px;
             background-color:yellow;
             float:left;

         }
         .box3{
             width:200px;
             height:200px;
             background-color:red;
             
         }
    </style>
</head>
<body>
    <div id="box">
       <!--  div[class="box$"]*3 -->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

<!-- 
浮动的使用：
    属性：float
    属性值：left right none（默认值，不浮动）
         - 元素只能在网页中水平方向进行浮动
         - 元素使用浮动后，会脱离文档流（正常页面布局），真实的dom结构还是存在于当前网页中，只不过当前元素是篇幅在浮动层，这个浮动层在浏览器是看不出来的
         - 脱离文档流的元素位置不存在
         - 浮动元素会出现在浮动层，浮动元素会碰到包含框（父级元素）就停止浮动
         - 浮动元素还会碰到前面一个含有浮动属性的盒子也会停止浮动
         - 当父级元素的宽度不足以放下所有盒子的时候，最后一个小盒子会往下进行移动知道能够有足够的空间
 -->

at呆呆酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.01.25浮动的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{
复制链接

扫一扫