HTML——标准文档流（float的浮动属性）

最新推荐文章于 2023-04-21 10:38:07 发布

爱睡觉的小馨

最新推荐文章于 2023-04-21 10:38:07 发布

阅读量668

点赞数 2

分类专栏： HTML与CSS5网页设计

本文链接：https://blog.csdn.net/qq_45696288/article/details/108551206

版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章 7 订阅

订阅专栏

·HTML元素在标准状况下的定位方式
·行内元素在同一行内横向排列
·块级元素占满整个一行，在页面中竖向排列
·元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的

1、元素的浮动属性：float

元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下:
选择器{
float:属性值;
}
在这里插入图片描述

首先看一下left属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

            div{
                width: 200px;
                height: 100px;
                margin: 10px;
                float: left;
            }

            div:nth-child(1){
                background-color: springgreen;
            }
            div:nth-child(2){
                background-color:rgb(61, 36, 31);
            }
            div:nth-child(3){
                background-color:violet;
            }   

    </style>

</head>

<body>
    
        <div>1</div>
        <div>2</div>
        <div>3</div>

</body>
</html>

在这里插入图片描述
再看一下right属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

            div{
                width: 200px;
                height: 100px;
                margin: 10px;
                float: right;
            }

            div:nth-child(1){
                background-color: springgreen;
            }
            div:nth-child(2){
                background-color:rgb(61, 36, 31);
            }
            div:nth-child(3){
                background-color:violet;
            }   

    </style>

</head>

<body>
    
        <div>1</div>
        <div>2</div>
        <div>3</div>

</body>
</html>

在这里插入图片描述

爱睡觉的小馨

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML——标准文档流（float的浮动属性）

·HTML元素在标准状况下的定位方式·行内元素在同一行内横向排列·块级元素占满整个一行，在页面中竖向排列·元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的1、元素的浮动属性：float元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下:选择器{float:属性值;}首先看一下left属性：<!DOCTYPE html><html lang="en">
复制链接

扫一扫