脱离常规流盒子和常规流盒子的区别

最新推荐文章于 2023-11-07 19:12:45 发布

su_ak

最新推荐文章于 2023-11-07 19:12:45 发布

阅读量387

点赞数

分类专栏： HTML.float/position 文章标签： html css

本文链接：https://blog.csdn.net/su_ak/article/details/124005859

版权

HTML.float/position 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先我们说一下什么盒子，在HTML中，盒子就是用来包裹内容的不可见的容器，分别为：((（content）内容盒 padding)填充盒：内边距与内容之间的距离）border：盒子边框）边框盒 ;最外margin：外边距（盒子与盒子之间的距离）
常规流：分为常规流块盒和常规流行盒，块盒在视口默认显示不换行（独占一行），行盒则相反；脱离常规流盒子：脱离常规流的方式在HTML中常见的有浮动和定位，浮动分为左浮动（float：left；），右浮动（float：right；），定位则分为相对定位（relative）、绝对定位（absolute）和固定定位（fixed）

浮动盒子：float相对于离他最近的祖先元素（父元素），应用场景一般为文字环绕、横向排列；浮动元素脱离了文档流，在常规流盒子排列时，常规流会无视float盒子；在float盒子在包含块排列时，会避开常规流（此时会造成高度坍塌），高度坍塌的根源是：常规流盒子的自动高度，在计算时，不考虑浮动盒子为解决高度坍塌有两种方法：（1）为其父元素增加类clearfix 使.clearfix{content：""；display：block；clear：both；}（2）在最后一个float的盒子下方加入一个常规流盒子，常规流盒子添加类clearfix ，样式中加入.clearfix{clear:both;}

 <style>                                                                                                     

        .content {

            width: 1000px;

            height: 1000px;

            background-color: bisque;

        }

       

        .item {

            width: 100px;

            height: 100px;

            float: left;

            border: 2px solid;

            background-color: #008c8c;

        }

       

        .normal {

            height: 60px;

            background-color: red;

        }

       

        .clearfix {

            clear: both;

        }

    </style>

<body>

    <div class="content">

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="normal clearfix"></div>

    </div>

</body>（法2）

.content {

            width: 1000px;

            height: 1000px;

            background-color: bisque;

        }

       

        .item {

            width: 100px;

            height: 100px;

            float: left;

            border: 2px solid;

            background-color: #008c8c;

        }

       

        .clearfix::after {

            content: "";

            display: block;

            clear: both;

            height: 60px;

            background-color: red;

        }

    </style>

<body>

    <div class="content clearfix">

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

        <div class="item">&</div>

    </div>

</body>（法1）

定位元素：position等于relative、absolute和fixed的元素称为定位元素，定位是相对于祖先元素中第一个定位元素而言，通过top right bottom left 四个属性值来控制定位元素的位置；relative（相对定位）默认为viewpoint（可视窗口）一般相对定位的位置是由元素本身所处视口位置决定、absolute（绝对定位）相对于祖先元素中离他最近的定位元素、fixed（固定定位）通过position：fixed；固定定位常用于中心广告位置的确定，制作半透明可视窗口以及图片底部阴影的制作等等