html+css实例：自围现象的产生（与float浮动有关）

The..Fuir

已于 2022-03-22 11:51:00 修改

阅读量175

点赞数 1

分类专栏： html css 文章标签： html css 前端

于 2022-03-17 18:31:40 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/123557265

版权

html 同时被 2 个专栏收录

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

本文介绍了浮动元素字围现象，即浮动元素不会遮挡非浮动文字，文字会自动绕过浮动元素。在浮动流中，元素不分块级、行内，都能水平排版并设置宽高，类似于行内块级元素。文章通过代码示例展示了文字包围浮动元素的效果，并指出在浮动流中无法使用`margin: 0 auto`进行居中对齐。

摘要由CSDN通过智能技术生成

浮动元素字围现象

       浮动元素不会挡住没有浮动元素中的文字(如果是数字的话没有用）, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

    -注意点:
        1.浮动流中没有居中对齐, 也就是没有center这个取值
        2.在浮动流中是不可以使用margin: 0 auto;

    -特点:
    1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
    无论是块级元素/行内元素/行内块级元素都可以水平排版
    2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
    3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

效果图：文字足够多的话会包围着左边粉红色的框

如果内容区是文字则没有效果：

代码实现：

<!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>
</head>
<body>
    <div class="second"></div>
    <div class="first">
        -第一章总则第一条为加强新冠肺炎疫情防控期间学生管理，
        维护正常校园秩序，落实疫情防控各项部署和措施，全力打赢疫情防控阻击战，
        根据上级部门和学校疫情防控工作总体要求，按照学校《怀化学院学生违纪处分条例》特制订本规定。
        第二条本规定适用于我校在籍的全日制本、预科学生。其他类别学生参照此条例执行。
        第三条本规定自发布之日起执行，至学校根据上级部门要求和学校实际宣布疫情结束止。
        第二章学生管理第四条学生假期（含开学后各类假期）返校时间以学校通知为准，任何学生不得擅自提前返校。
        （一）未经批准或不听劝阻，擅自提前返校的，给予警告、严重警告处分。（二）擅自提前返校，隐瞒不报的，给予记过以上处分。
        （三）因特殊情况经批准提前返校的学生，却不服从学校疫情防控管理要求的，视情节轻重，给予警告以上处分，直至开除学籍。
        第五条学生按照学校要求填报个人相关信息时，要如实、及时、准确填报，不得有不报、迟报、误报、瞒报等行为。
    </div>
</body>
</html> 
<style>
    .first{
        width: 500px;
       
    }
    .second{
        width: 100px;
        height: 300px;
        background-color: pink;
       float: left;
    }
</style>