随笔 - 54, 文章 - 0, 评论 - 0, 阅读 - 13105

元素的浮动

1.元素的浮动属性float

所谓的元素浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。浮动属性作为CSS3的重要属性，在网页布局中至关重要。在CSS3中，通过float属性来定义浮动，其基本语法格式为：

选择器{float：属性值；}

float属性值有三个如下所示：

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动

下面通过一个案例对float属性进行演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素的浮动</title>
        <style type="text/css">
        .father{ /*定义父元素的样式*/
            background: #ccc;
            border: 1px dashed #999;
        }
        .box01,.box02,.box03{  /*定义box01、box02、box03三个盒子样式*/
            height: 50px;
            line-height: 50px;
            background: #ff9;
            border: 1px solid #f33;
            margin: 15px;
            padding: 0px 10px;
        }
        p{ /*定义段落文本的样式*/
            background: #fcf;
            border: 1px dashed #f33;
            margin: 15px;
            padding: 0px 10px;
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box01">box01</div>
            <div class="box02">box02</div>
            <div class="box03">box03</div>
            <p>这里是个浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，
            这里是个浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，
            这里是个浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本。</p>
        </div>
    </body>
</html>

运行效果如图所示：

box1、box2、box3及段落文本从上到下一一罗列。如果不对元素设置浮动，则该元素占据页面整行。

以box1为对象对其应用左浮动样式，具体CSS代码如下：

.box01{
        float: left;
}

运行效果如图所示：

box01与box02同时设置左浮动：

.box01,.box02{
            float: left;
}

运行效果如图所示：

box01、box02与box03同时设置左浮动：

.box01,.box02,.box03{
    float: left;
}

运行效果如图所示：

2.清除浮动

在网页中，由于浮动元素不再占用原文档流的位置，因此使用浮动时会影响后面相邻的固定元素。受到其周围元素浮动的影响，产生了位置上的变化。这时，如果要避免浮动对其他元素的影响，就需要清除浮动。在CSS3中，使用clear属性清除浮动。clear属性的常用值有3个：

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
none	同时清除左右两侧浮动的影响

下面通过一个案例对clear属性进行演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除元素的左浮动</title>
        <style type="text/css">
        .father{ /*定义父元素的样式*/
            background: #ccc;
            border: 1px dashed #999;
        }
        .box01,.box02,.box03{  /*定义box01、box02、box03三个盒子样式*/
            height: 50px;
            line-height: 50px;
            background: #ff9;
            border: 1px solid #f33;
            margin: 15px;
            padding: 0px 10px;
            float: left;    /*定义box1、box2、box3的左浮动*/
        }
        p{ /*定义段落文本的样式*/
            background: #fcf;
            border: 1px dashed #f33;
            margin: 15px;
            padding: 0px 10px;
            clear: left;  /*清除左浮动*/
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box01">box01</div>
            <div class="box02">box02</div>
            <div class="box03">box03</div>
            <p>这里是个浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，
            这里是个浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，
            这里是个浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本，这里是浮动盒子外围的段落文本。</p>
        </div>
    </body>
</html>

运行效果如图所示：

对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除浮动</title>
        <style type="text/css">
        .father{ /*定义父元素的样式*/
            background: #ccc;
            border: 1px dashed #999;
        }
        .box01,.box02,.box03{  /*定义box01、box02、box03三个盒子样式*/
            height: 50px;
            line-height: 50px;
            background: #ff9;
            border: 1px solid #f33;
            margin: 15px;
            padding: 0px 10px;
            float: left;    /*定义box1、box2、box3的左浮动*/
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box01">box01</div>
            <div class="box02">box02</div>
            <div class="box03">box03</div>
        </div>
    </body>
</html>

运行效果如图所示：

由于受到子元素浮动的影响，没有设置高度的父元素变成了一条线。子元素与父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。下面总结三种常用的清除浮动的方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>空标记清除浮动</title>
        <style type="text/css">
        .father{ /*定义父元素的样式*/
            background: #ccc;
            border: 1px dashed #999;
        }
        .box01,.box02,.box03{  /*定义box01、box02、box03三个盒子样式*/
            height: 50px;
            line-height: 50px;
            background: #ff9;
            border: 1px solid #f33;
            margin: 15px;
            padding: 0px 10px;
            float: left;    /*定义box1、box2、box3的左浮动*/
        }
        .box04{clear: both;} /*对空标记应用clear：both；*/
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box01">box01</div>
            <div class="box02">box02</div>
            <div class="box03">box03</div>
            <div class="box04"></div>  <!--在浮动元素后添加空标记-->
        </div>
    </body>
</html>

运行效果如图所示：

上述方法虽然可以清除浮动，但是在无形中增加了毫无意义的结构元素（空标记）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>overflow清除浮动</title>
        <style type="text/css">
        .father{ /*定义父元素的样式*/
            background: #ccc;
            border: 1px dashed #999;
            overflow: hidden;  /*对父元素应用overflow：hidden；*/
        }
        .box01,.box02,.box03{  /*定义box01、box02、box03三个盒子样式*/
            height: 50px;
            line-height: 50px;
            background: #ff9;
            border: 1px solid #f33;
            margin: 15px;
            padding: 0px 10px;
            float: left;    /*定义box1、box2、box3的左浮动*/
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box01">box01</div>
            <div class="box02">box02</div>
            <div class="box03">box03</div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>使用after伪元素清除浮动</title>
        <style type="text/css">
        .father{ /*定义父元素的样式*/
            background: #ccc;
            border: 1px dashed #999;
        }
        .father:after{  /*对父元素应用after伪元素*/
            display: block;
            clear: both;
            content: " ";
            visibility: hidden;
            height: 0;
        }
        .box01,.box02,.box03{  /*定义box01、box02、box03三个盒子样式*/
            height: 50px;
            line-height: 50px;
            background: #ff9;
            border: 1px solid #f33;
            margin: 15px;
            padding: 0px 10px;
            float: left;    /*定义box1、box2、box3的左浮动*/
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="box01">box01</div>
            <div class="box02">box02</div>
            <div class="box03">box03</div>
        </div>
    </body>
</html>

使用after伪元素时需要注意以下两点：

（1）必须为需要清除浮动的伪元素设置“height：0；”样式。

（2）必须在伪元素中设置content属性，属性值可以为空。

overflow属性

当盒子模型内的元素超出盒子模型自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用overflow属性。

overflow属性的属性值有四个，如表所示：

属性值	描述
visible	内容不会被修剪，会呈现在元素框之外（默认值）
hidden	溢出内容会被修剪，并且修剪的内容是不可见的
auto	在需要时产生滚动条，即自适应所要显示的内容
scroll	溢出内容会被修剪，且浏览器始终会显示滚动条

下面通过一个案例对 overflow属性的用法进行演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>使用after伪元素清除浮动</title>
        <style type="text/css">
        div{
            width: 100px;
            height: 140px;
            background: #f99;
            overflow: visible; /*溢出内容呈现在元素框之外*/
        }
        </style>
    </head>
    <body>
        <div>当元素内的盒子超出自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用
        overflow属性，它用于规范元素中溢出内容的显示。</div>
    </body>
</html>

运行效果如图所示：

将“overflow：visible；”更改如下：

overflow: hidden;

运行效果如图所示：

元素的定位

1.元素的定位属性

定位模式

在CSS3中，position属性用于定义元素的定位模式。position属性的常用值：

值	描述
static	静态定位
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

边偏移

定位模式仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS3中，通过边偏移属性来精确定义定位元素的位置，具体解释如下：

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2.静态定位static

静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档中默认位置。所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过偏移属性来改变元素的位置。

3.相对定位relative

相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

下面通过一个案例对元素设置相对位置进行演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素的定位</title>
        <style type="text/css">
        body{margin: 0px; padding: 0px; font-size: 18px; font-weight: bold;}
        .father{
            margin: 10px auto;
            width: 300px;
            height: 300px;
            padding: 10px;
            background: #ccc;
            border: 1px solid #000;
        }
        .child01,.child02,.child03{
            width: 100px;
            height: 50px;
            line-height: 50px;
            background: #ff0;
            border: 1px solid #000;
            margin: 10px 0px;
            text-align: center;
        }
        .child02{
            position: relative; /*相对定位*/
            left: 150px;  /*距默认位置左边线150px*/
            top: 100px;  /*距‘顶部边线100px*/
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child01">child-01</div>
            <div class="child02">child-02</div>
            <div class="child03sss">child-03</div>
        </div>
    </body>
</html>

运行效果如图所示：

4.绝对定位absolute

绝对定位是将元素依据最近的已经定位的父元素进行定位，若所有父元素都没有定位，则依据body根元素进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

在相对定位的基础上，将child02的定位模式设置为绝对定位：

.child02{
            position: absolute; /*绝对定位*/
            left: 150px;  /*距默认位置左边线150px*/
            top: 100px;  /*距‘顶部边线100px*/
        }

运行效果如图所示：

在上面的案例中，对child设置了绝对定位，当浏览器窗口放大或缩小时，child相对于其直接父元素的位置都将发生变化。当缩小浏览器窗口时，其直接父元素的位置发生了变化。

对于此种情况，可将直接父元素设置为相对定位，但不对其设置偏移量，然后再对子元素应用绝对定位，并通过偏移属性对其进行精确定位。这样父元素既不会去其空间，同时还能保证子元素依据直接父元素准确定位。

下面通过一个案例来演示子元素依据其直接父元素准确定位的方法进行演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素的定位</title>
        <style type="text/css">
        body{margin: 0px; padding: 0px; font-size: 18px; font-weight: bold;}
        .father{
            margin: 10px auto;
            width: 300px;
            height: 300px;
            padding: 10px;
            background: #ccc;
            border: 1px solid #000;
            position: relative;
        }
        .child01,.child02,.child03{
            width: 100px;
            height: 50px;
            line-height: 50px;
            background: #ff0;
            border: 1px solid #000;
            margin: 10px 0px;
            text-align: center;
        }
        .child02{
            position: absolute; /*绝对定位*/
            left: 150px;  /*距默认位置左边线150px*/
            top: 100px;  /*距顶部边线100px*/
        }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child01">child-01</div>
            <div class="child02">child-02</div>
            <div class="child03sss">child-03</div>
        </div>
    </body>
</html>

运行效果如图所示：

注意：如果只设置绝对定位，不设置偏移，则元素的位置不变，但其不再占用标准文档流中的空间，与上移的后续元素重叠。定义多个偏移属性时，如果left和right冲突时，以left为准；top和bottom冲突，以top为准。

5.固定定位fixed

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

6.z-index层叠等级属性

要想调整重叠定位元素的顺序，可对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。默认属性值为0，取值越大，定位元素在层叠元素中越居上。仅对定位元素生效。

元素的类型与转换

1.元素的类型

块元素

块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

行内元素

行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身对应的页面元素的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

下面通过一个案例来进一步认识块元素与行内元素：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>块元素和行内元素</title>
        <style type="text/css">
            h2{  /*定义h2的背景颜色、宽度、高度、文本水平对齐方式*/
                background: #fcc;
                width: 350px;
                height: 50px;
                text-align: center;
            }
            p{background: #090;} /*定义p的背景颜色*/
            strong{   /*定义strong的背景颜色、宽度、高度、文本水平对齐方式*/
                background: #fcc;
                width: 350px;
                height: 50px;
                text-align: center;
            }
            em{background: #ff0;}  /*定义em的背景颜色*/
            del{background: #ccc;} /*定义del的背景颜色*/
        </style>
    </head>
    <body>
        <h2>h2标记定义的文本。</h2>
        <p>p标记定义的文本。</p>
        <strong>strong标记定义的文本。</strong>
        <em>em标记定义的文本。</em>
        <del>del标记定义的文本。</del>
    </body>
</html>

运行效果如图所示：

行元素通常嵌套在块元素中使用，而块元素却不能嵌套在行内元素中。例如：

<p>
        <strong>strong标记定义的文本。</strong>
        <em>em标记定义的文本。</em>
        <del>del标记定义的文本。</del>
</p>

运行效果如图所示：

当行内元素嵌套在块元素中时，就会在块元素上占据一定的范围，成为块元素的一部分。

块元素通常独占一行，可以设置宽、高和对齐属性，而行内元素通常不占一行，不可以设置宽、高和对齐属性，而块元素不可以嵌套在行内元素中。

2.标记

是行内元素，与之间只能包含文本和各种行内标记，中还可以嵌套多层。

标记通常用于定义网页中某些特殊显示的文本，配合class属性使用。它本身没有固定的格式表现，只有应用样式时，对应元素才会产生视觉上的变化。当其他行内标记都不合适时，就可以使用标记。

下面通过一个案例来演示标记的用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>span标记</title>
        <style type="text/css">
            #header{   /*设置当前div中文本的通用样式*/
                font-family: "黑体";
                font-size: 14px;
                color: #515151;
            }
            #header .chuanzi{   /*设置第一个span中的标签文本*/
                color: #0174c7;
                font-size: 20px;
                padding-right: 20px;
            }
            #header .course{   /*设置第一个span中的标签文本*/
                font-size: 18px;
                color: #ff0cd2;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <span class="chuanzi">传智播客</span>前端与移动开发课程<span class="course">上线啦</span>，
            欢迎广大学子踊跃报名！
        </div>
    </body>
</html>

运行效果如图所示：

3.元素的转换

如果希望行内元素具有块元素的某些特性，如可以设置宽、高，或者需要块元素具有行内元素的某些特性，如不独占一行排列，可以使用display属性对元素的类型进行转换。

display属性常用的属性值及含义如下：

inline：此元素将显示为行内元素。
block：此元素将显示为块元素。
inline-block：此元素将显示为行内块元素，可以对其设置宽、高和对齐等属性，但是该元素不会独占一行。
none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

下面通过一个案例来演示display属性的用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素的转换</title>
        <style type="text/css">
            div,span{  /*同时设置div标记和span标记的样式*/
                width: 200px;  /*宽度*/
                height: 20px;  /*高度*/
                background: #fcc;  /*背景颜色*/
                margin: 10px;  /*外边距*/
            }
            .d_one,.d_two{display: inline;}  /*将前两个div标记转换为行内元素*/
            .s_one{display: inline-block;}  /*将第一个span标记转换为行内块元素*/
            .s_three{display: block;}  /*将第三个span标记转换为块元素*/
        </style>
    </head>
    <body>
        <div class="d_one">第一个div标记中的文本</div>
        <div class="d_two">第二个div标记中的文本</div>
        <div class="d_three">第三个div标记中的文本</div>
        <span class="s_one">第一个span标记中的文本</span>
        <span class="s_two">第二个span标记中的文本</span>
        <span class="s_three">第三个span标记中的文本</span>
    </body>
</html>

运行效果如图所示：

posted on 2022-04-25 16:17 心有所信方能行远阅读(366) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS3选择器

· 文本样式属性

· CSS笔记

· 02 CSS

· 前端基础之CSS浮动和定位方式

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码

2025年3月

日

一

二

三

四

五

六

昵称：心有所信方能行远
园龄： 3年
粉丝： 1
关注： 4

+加关注

元素的浮动

1.元素的浮动属性float

2.清除浮动

overflow属性

元素的定位

1.元素的定位属性

定位模式

边偏移

2.静态定位static

3.相对定位relative

4.绝对定位absolute

5.固定定位fixed

6.z-index层叠等级属性

元素的类型与转换

1.元素的类型

块元素

行内元素

2.<span>标记

3.元素的转换

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜