CSS11.浮动

最新推荐文章于 2022-02-13 21:37:47 发布

时光无错孤独难谈

最新推荐文章于 2022-02-13 21:37:47 发布

阅读量116

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104311611

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        /* 
            块元素在文档流默认垂直排列
            如果希望水平排列，可以脱离文档流
            使用float使元素浮动，脱离文档流
                可选值：
                    none:默认值，不动
                    left:脱离文档流，向左侧浮动
                    right:脱离文档流，向左侧浮动

            当为一个元素设置浮动时，元素会立即脱离文档流，它下面元素会立即向上移动
            元素浮动以后，会尽量往左上或右上飘，直到遇到父元素的边框或者其他浮动元素
                如果浮动元素上边是一个没有浮动的元素，则浮动元素不会超过块元素
                浮动的元素不会超过他上边的兄弟元素，最多一边齐
        */
            .box1{
                /* display: inline-block; */
                width: 200px;
                height: 200px;
                background-color: pink;
                float: right;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                float: right;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: blue;
                float: right;
            }

            .box4{
                width: 200px;
                height: 200px;
                background-color: gray;
                float: left;
                /* 
                    通过浮动，可以创造文字环绕图片效果
                */
            }
            .p1{
                height: 500px;
                background-color: fuchsia;
            }
            /* 
                块元素脱离文档流，高和宽都被内容撑开

            */
            .s1{
                /*  
                    开启apan浮动
                    内联元素脱离文档流以后变成块元素
                */
                float: left;
                width: 100px;
                height: 100px;
                background-color: gold;
            }
        
        </style>


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

        <p></p>

        <div class="box4"></div>
        <P class="p1"></P>
        <P class="s1">aaa</P>
    </body>


</html>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS11.浮动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <style type="text/css"> *{ margin: 0; padding: 0; ...
复制链接

扫一扫