CSS学习总结基础篇浮动的概念及其使用

最新推荐文章于 2023-03-12 16:05:12 发布

Ace_bb

最新推荐文章于 2023-03-12 16:05:12 发布

阅读量287

点赞数

分类专栏： HTML、CSS、JS 文章标签： css html5 html

本文链接：https://blog.csdn.net/Ace_bb/article/details/104325955

版权

HTML、CSS、JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

浮动(float)

标准流

标准流就是标签按照规定好的顺序排列。
标准流布局

块级元素独占一行，从上到下排列
常用元素： **div hr p h1~h6 ul ol dl form table **
行元素会按照顺序，从左到右依次排列碰到父元素边缘则会自动换行
常用元素: span a i em等等

多个块元素横向排列，建议用浮动来做

什么是浮动1

浮动是用于创建一个浮动框，将其移到一边，直到边缘或右边缘触及包含块或另一个浮动的边缘
语法：
选择器{
float:属性值；
}

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

浮动标签的重要特征

脱离标准流的控制，直接移动到指定的位置。
浮动的盒子不再保留原先的位置。

示例代码：

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .box1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box2{
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">第一个浮动的盒子</div>
    <div class="box2">第二个未浮动的盒子</div>
</body>

可见给第一个盒子设置了浮动后，失去了原先的位置，第二个盒子占领了第一个盒子原先的位置，出现了重叠效果。

多个盒子设置为浮动时的效果

代码：

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box2{
            background-color: red;
        }
        .box3{
            background-color: green;
        }
        .box4{
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="box1">第一个盒子</div>
    <div class="box2">第二个盒子</div>
    <div class="box3">第三个盒子</div>
    <div class="box4">第四个盒子</div>

</body>

可见四个盒子无缝衔接的排列在一起。当左右缩放网页时，盒子的排列会改变。

浮动经常和标准的父盒子一起搭配。

Ace_bb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结基础篇浮动的概念及其使用

浮动(float)标准流标准流就是标签按照规定好的顺序排列。标准流布局块级元素独占一行，从上到下排列常用元素： **div hr p h1~h6 ul ol dl form table **行元素会按照顺序，从左到右依次排列碰到父元素边缘则会自动换行常用元素: span a i em等等多个块元素横向排列，建议用浮动来做什么是浮动1浮动是用于...
复制链接

扫一扫