CSS 3 浮动布局，深度挖掘-2 -cyy

来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:28　　对本文有异议

环绕距离控制：

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    span.shape{
        width:200px;
        height:200px;
        border:2px solid red;
        padding:5px;
        margin:5px;
        display:block;
        float:left;
        /*环绕距离控制：*/
        shape-outside:content-box;
        shape-outside:padding-box;
        shape-outside:border-box;
        shape-outside:margin-box;
    }
</style>
</head>
 
<body>
<p>
<span class="shape"></span>
    HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
</p>
</body>
 
</html>

浮动显示区域形状定制：

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    span.shape{
        width:100px;
        height:100px;
        background:pink;
        margin:5px;
        display:block;
        float:left;
        shape-outside:margin-box;
        /*圆形，at后面设置圆心*/
        clip-path:circle(50%);
        clip-path:circle(50% at 100% 0);
        clip-path:circle(50% at 100% 100%);
        /*椭圆*/
        clip-path:ellipse(30% 50%);
        /*多边形*/
        clip-path:polygon(50% 0,100% 100%,0 100%);
        clip-path:polygon(50% 0,100% 50%,100% 100%,0 100%,0 50%);
    }
</style>
</head>
 
<body>
<p>
<span class="shape"></span>
    HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
</p>
</body>
 
</html>

使用浮动控制文本内容环绕排版：

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    span.shape{
        width:100px;
        height:100px;
        background:pink;
        margin:5px;
        display:block;
        float:left;
        /*将shape-outside的值，设置成跟clip-path一致*/
        shape-outside:polygon(0 0,100% 100%,0 100%);
        clip-path:polygon(0 0,100% 100%,0 100%);
        shape-outside:circle();
        clip-path:circle();
        shape-outside:ellipse(30% 70%);
        clip-path:ellipse(30% 70%);
    }
</style>
</head>
 
<body>
<p>
<span class="shape"></span>
    HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
</p>
</body>
 
</html>

围绕图片的文本绕排：

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    img{
        width:100px;
        height:100px;
        margin:5px;
        display:block;
        float:left;
        /*将shape-outside的值，设置成跟url一致*/
        shape-outside:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg);
    }
</style>
</head>
 
<body>
<p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg">
    HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
</p>
</body>
 
</html>