CSS浮动、清除浮动

白菜头33

已于 2024-11-01 23:40:55 修改

阅读量1.5k

点赞数 44

文章标签： css 前端

于 2024-10-15 23:52:46 首次发布

本文链接：https://blog.csdn.net/2302_80916083/article/details/142964391

版权

一、浮动

浮动可以使元素向左或向右移动，其周围的元素也会重新排列。float属性定义元素在哪个方向浮动,任何元素都可以浮动，而浮动元素就会变成一个块状元素。 float属性值如下：

float属性值说明
none 对象不浮动
left 对象向左移动
right 对象向右移动

浮动的作用：网页布局和图文环绕
浮动盒排布规则：
1.向上向左or向上向右排列；
2.若空间无法容纳，则先向下移动。直到高度足够后再向左向右；
3.当前浮动盒的顶边，不得高于上一个浮动盒的顶边

1、网页布局

先设置3个div盒子为A、B、C,为3个盒子设置宽高（没有设置浮动前的效果），如图：

运行代码如下：

<style>
        div{
            margin: 5px;    /* 设置外边距为5px */
        }
        #div1{
            width: 20%;  /* 占整个页面的20% */
            height: 100px;
            border: 2px black solid;
            background-color: aquamarine;
        }
        #div2{
            width: 40%;
            height: 50px;
            border: 2px black solid;
            background-color: khaki;
        }
        #div3{
            width: 30%;
            height: 50px;
            border: 2px black solid;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="div1">A:float:left</div>
    <div id="div2">B:float:left</div>
    <div id="div3">C:float: left</div>
</body>

要使盒子实现并排效果，并排的盒子都要设置浮动（父盒子要有足够的宽度，否则盒子会跑到下一行），效果如下：

运行代码如下：

    <style>
        div{
            margin: 5px;    /* 设置外边距为5px */
        }
        #div1{
            width: 20%;  /* 占整个页面的20% */
            height: 100px;
            border: 2px black solid;
            /* margin-left: 50px; */
            background-color: aquamarine;
            float: left;    /* 设置盒子向左浮动 */
        }
        
        #div2{
            width: 40%;
            height: 50px;
            border: 2px black solid;
            background-color: khaki;
            float: left;
        }
        #div3{
            width: 30%;
            height: 50px;
            border: 2px black solid;
            background-color: skyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1">A:float:left</div>
    <div id="div2">B:float:left</div>
    <div id="div3">C:float: left</div>
</body>

正常文档流排布方式：块级元素自上向下排布

A盒子添加了浮动后，浮在表层，B盒子向上递补到A盒子的位置，C盒子也向上到递补。A盒子漂浮在B盒子上方。

浮动的特点：浮动的元素会脱离文档流，漂浮在文档流上方，在文档流中不占位置，后边的元素向前移动。

2、图文环绕（父盒塌陷）

图文环绕是指使用float属性让文本环绕图片。但是当文字过少时，就会出现图片溢出的情况，如下图所示：

代码显示：

<style>
        .div1{
            border: 2px black solid;
        }
        #img1{
            width: 200px;
            height: 200px;
            float: left;
        }
        #img2{
            width: 200px;
            height: 200px;
            float: right;
        }
        
        p{
            font-family: 宋体;
            text-indent: 30px;
        }
    </style>
</head>
<body>
<div class="div1">
    <img src="../9、盒模型/666.jpg" id="img1">
    <img src="../9、盒模型/666.jpg" id="img2">

    <p>夏日的黄昏，来得有点晚，肆虐了一天的太阳终于收敛了耀眼的光辉，取而代之是淡淡的朱红，柔和地照耀着喧嚣的大地。“夕阳无限好，只是近黄昏”，毋庸置疑，夕阳的确很美，但黄昏将止，便使得夕阳太过短暂。夏日黄昏，日影将斜，天空像一块淡红的布幔，时间越久，上面的红色便会脱离，露出的，是漆黑的天幕。在黄昏下，一切那么朦胧，参差的树影，走动的行人，偶然的景色看起来像残缺模糊的的山水画，一股淡淡的哀愁涌上心头，“小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯”这样的诗句，总在黄昏时分不经意掠过脑海，让人不禁叹息：如此美妙的黄昏只有短短的一刻。但是我知道美妙的东西不会永存，正如前面说的夕阳，如昙花一现。这时，夕阳西下，天，完全成了黑色。</p>
</div>

如果父盒由于各种原因没有设置高度（忘记或暂时无法确定父盒高度），子盒的浮动会导致父盒的高度塌陷。 父盒高度塌陷后，会影响父盒兄弟盒的布局。基于上图情况，应给父盒设置高度，效果如下图显示：

代码显示：

<style>
        .div1{
            /* 如果父盒由于各种原因没有设置高度（忘记或暂时无法确定父盒高度），子盒的浮动会导致父盒的高度塌陷。
            父盒高度塌陷后，会影响父盒兄弟盒的布局 */
             /* 解决方法：为父盒设置高度 */
            height: 200px;
            border: 2px black solid;
        }
        #img1{
            width: 200px;
            height: 200px;
            float: left;
        }
        #img2{
            width: 200px;
            height: 200px;
            float: right;
        }
        
        p{
            font-family: 宋体;
            text-indent: 30px;
        }
    </style>
</head>
<body>
<div class="div1">
    <img src="../9、盒模型/666.jpg" id="img1">
    <img src="../9、盒模型/666.jpg" id="img2">

      <p>夏日的黄昏，来得有点晚，肆虐了一天的太阳终于收敛了耀眼的光辉，取而代之是淡淡的朱红，柔和地照耀着喧嚣的大地。“夕阳无限好，只是近黄昏”，毋庸置疑，夕阳的确很美，但黄昏将止，便使得夕阳太过短暂。夏日黄昏，日影将斜，天空像一块淡红的布幔，时间越久，上面的红色便会脱离，露出的，是漆黑的天幕。在黄昏下，一切那么朦胧，参差的树影，走动的行人，偶然的景色看起来像残缺模糊的的山水画，一股淡淡的哀愁涌上心头，“小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯”这样的诗句，总在黄昏时分不经意掠过脑海，让人不禁叹息：如此美妙的黄昏只有短短的一刻。但是我知道美妙的东西不会永存，正如前面说的夕阳，如昙花一现。这时，夕阳西下，天，完全成了黑色。</p>
</div>
</body>

二、清除浮动

为了防止浮动溢出现象的出现而进行的CSS处理,叫作清除浮动。清除浮动即清除掉元素 float 属性。使用清除浮动不仅能够解决页面错位的现象,还能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。clear属性值如下：

clear属性值	说明
left	清除左浮动
right	清除右浮动
both	左右浮动一起删除

清除浮动的作用：解决父盒高度塌陷和文字环绕的问题。

没有清除浮动前的效果显示：

代码显示：

    <style>
        article{
            width: 600px;
            height: 200px;
            background-color: antiquewhite;
        }
        #div1{
            width: 100px;
            height: 100px;
            border: 2px black dashed;
            margin: 10px;
            float: left;
            display: inline;
        }
        #div2{
            width: 100px;
            height: 100px;
            border: 2px black dashed;
            margin: 10px;
            float: left;
            display: inline;
        }
        #div3{
            width: 100px;
            height: 100px;
            border: 2px black dashed;
            margin: 10px;
            float: right;
            display: inline;
        }
    </style>
</head>
<body>
    <article>
        <div id="div1">盒子1</div>
        <div id="div2">盒子1</div>
        <div id="div3">盒子1</div>
        <p>清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动</p>
    </article>
</body>

清除浮动后的效果显示：

代码显示：

<style>
        article{
            width: 600px;
            height: 200px;
            background-color: antiquewhite;
        }
        #div1{
            width: 100px;
            height: 100px;
            border: 2px black dashed;
            margin: 10px;
            float: left;
            display: inline;
        }
        #div2{
            width: 100px;
            height: 100px;
            border: 2px black dashed;
            margin: 10px;
            float: left;
            display: inline;
        }
        #div3{
            width: 100px;
            height: 100px;
            border: 2px black dashed;
            margin: 10px;
            float: right;
            display: inline;
        }
        p{
            clear: both;
        }
    </style>
</head>
<body>
    <article>
        <div id="div1">盒子1</div>
        <div id="div2">盒子1</div>
        <div id="div3">盒子1</div>
        <p>清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动清除浮动</p>
        <div class="clear"></div>
    </article>
</body>