02.浮动的其他的特点1

2022-06-22 11:32:30 阅读：136 来源： 互联网

标签：02 浮动 exercitationem consectetur sunt 特点 dignissimos elit itaque

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .box1{
            width:100px;
            height:100px;
            background-color: #bfa;
            /*  浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
                    所以我们可以利用浮动来设置文字环绕图片的效果
            */
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officia natus quisquam ad quas exercitationem veritatis vero reprehenderit unde? Vel molestiae sunt explicabo suscipit dignissimos itaque, nihil velit accusantium voluptatum.
    </p>
</body>
</html>

未给box1设置浮动时：

给box1设置浮动后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box2 {
            background-color: blue;
            /* 
                元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
            
                脱离文档流的特点(而不是浮动独有的特点)：
                    块元素：
                        1、块元素不再独占页面的一行
                        2、脱离文档流以后，块元素的宽度和高度默认（没有指定的情况下！）都被内容撑开

                    行内元素：
                        行内元素脱离文档流以后会变成块元素，特点和块元素一样

                    总结：脱离文档流以后，不需要再区分块和行内了
            */
            float:left;
        }
    </style>
</head>

<body>
    <div class="box2">helloworld</div>
    <a href="#">超链接</a>
</body>

</html>

未给box2设置浮动时：

给box2设置浮动后：

给行内元素设置浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .s1{
            background-color:yellow;
            /* 行内元素不支持设置宽和高 */
            float:left;
            /* 设置浮动后变块元素，就可以设置宽和高 */
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <span class="s1">我是一个span</span>
</body>
</html>

标签：02,浮动,exercitationem,consectetur,sunt,特点,dignissimos,elit,itaque
来源： https://www.cnblogs.com/sherryyuan/p/16399819.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

02.浮动的其他的特点1