CSS页面布局（浮动+定位）详解

最新推荐文章于 2024-04-22 21:55:14 发布
最新推荐文章于 2024-04-22 21:55:14 发布
阅读量1.4k 收藏 13
点赞数 2
文章标签： css 前端 html 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Asitwas/article/details/133216418
版权

文章目录

CSS页面布局

CSS布局有很多内容，感兴趣的同学可以课下自己了解，今天我们主要介绍介绍一下浮动和定位

CSS有三种基本定位机制：普通文档流、浮动、定位。

普通文档流中元素的位置由元素在HTML中的位置决定。

一、浮动

1、为什么需要浮动

提问：如果我们用标准流能很方便的实现如下效果吗？

(1) 如何让多个块级盒子（div）水平排列成一行？

请添加图片描述

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会出现空白缝隙，很难控制。

请添加图片描述

<!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: 200px;
            background-color: pink;
            display: inline-block; // 行内块元素
        }

        .left {
            background-color: red;
        }

        .middle {
            background-color: green;
        }

        .right {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="left">左</div>
    <div class="middle">中</div>
    <div class="right">右</div>
</body>
</html>

(2) 如何实现两个盒子的左右对齐？

请添加图片描述

总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动！

<!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: 200px;
            background-color: pink;
            float: left;
        }

        .left {
            background-color: red;
        }

        .middle {
            background-color: green;
        }

        .right {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="left">左</div>
    <div class="middle">中</div>
    <div class="right">右</div>
</body>
</html>

请添加图片描述

**注意：**浮动的盒子不会发生外边距合并！

（外边距合并：1、嵌套元素外边距合并；2、相邻盒子垂直外边距合并）

2、什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 { float: 属性值;}
属性描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

实例1（刚刚上面已经打过了）：

<!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: 200px;
            background-color: pink;
            float: left;
        }

        .left {
            background-color: red;
        }

        .middle {
            background-color: green;
        }

        .right {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="left">左</div>
    <div class="middle">中</div>
    <div class="right">右</div>
</body>
</html>

实例2：

<!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: 200px;
            background-color: pink;
        }

        .left {
            background-color: red;
            float: left;
        }

        .right {
            background-color: yellow;
            float: right;

        }
    </style>
</head>
<body>
    <div class="left">左</div>
    <div class="right">右</div>
</body>
</html>

这实现的就是上面两个盒子分居左右对齐的效果。

另：提醒display：inline-block同样也很有用，某些情况下很方便；

3、浮动特性（重点）

浮动元素会脱离标准流（脱标），即浮动的盒子不再保留原先的位置

浮动的元素会在一行内显示并且元素顶部对齐（除非宽度不够在一行才会换行）

浮动的元素会具有行内块元素的特性

设置了一样属性的浮动元素是紧挨着的，不会有缝隙

（1）脱离标准流（最重要特性）

1、脱离标准流的控制移动到指定位置

2、浮动的盒子不再保留原先的位置

请添加图片描述

（2）浮动元素会一行内显示并且元素顶部对齐

请添加图片描述

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多的盒子就会另起一行。

（3）浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

1、如果块级盒子没有设置宽度，默认宽度和父级一样宽（不如说是因为没有设置内容，style被父级的设置填充了），但是添加浮动之后，它的大小根据内容来决定

2、浮动的盒子中间是没有缝隙的，是紧挨着一起的

3、行内元素同理（昨天正好进会议听了几分钟，正好听到讲行内元素，浮动就是行内元素转换为块元素的方法之一，另两种是display:block和我们后面要讲到的定位里的绝对定位）

4、浮动布局的注意点
（1）浮动的盒子不会有外边距合并的问题
（2）浮动的盒子居中

这里就简单介绍一下其中一种实现方法，简单来说就是在浮动的盒子外加一个非浮动的div，这个div和浮动元素宽度一致，再给div一个margin： 0 auto。

请添加图片描述

<!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>
        .clearfix::after {
            content: "";
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

        .float-item {
            border: 1px solid #000;
            width: 50px;
            height: 50px;
            float: left;
            width: 100px;
            background-color: yellow;
        }

        .container-layout {
            border: 1px solid #000;
            width: 300px;
        }

        .content {
            width: 100px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container-layout">
        <div class="content clearfix">
            <div class="float-item">float-item</div>
        </div>
    </div>
</body>

</html>
（2）一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，由于其脱离了标准流，那么为了防止其他兄弟的显示不受影响，其他兄弟也最好应该“同流合污”去浮动。

（3）浮动和标准流的父盒子搭配

准则：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置（也就是之前提到的**“多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动”**）

请添加图片描述

注意：在实际应用时父盒子一般不给高度（由子盒子自己撑开），但是当父盒子中所有子元素都添加了浮动以后，由于浮动不占据原来的位置，所以父盒子高度撑不开就自动变为0，从而变成一条线，那么其他的标准流的盒子就会跑上来藏在浮动盒子的下面，这样的现象就是高度塌陷。

请添加图片描述

示例：

<!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>
        .one {
            border: 10px solid rebeccapurple;
        }

        .two {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            float: left;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>

</html>

那我们要如何解决高度塌陷的问题呢？就要运用到我们下面所要讲到的清除浮动。

5、清除浮动（重点）

清除浮动的本质就是清除浮动元素造成的影响。特别地，如果父盒子本身有高度，则不需要清除浮动。

语法： 选择器 { clear: 属性值; }

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

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
    div {
        margin: 5px;
        width: 50px;
        height: 50px;
    }

    .left {
        float: left;
        background: pink;
    }

    .middle {
        clear: none;
        background: teal;
    }

    .right {
        float: right;
        height: 100px;
        background: cyan;
    }
</style>

<body>

    <div class="left">left</div>
    <div class="right">right</div>
    <p class="middle">
        我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河
        我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河
        我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱河慧 我爱慧河 我爱慧河 我爱慧河 我爱慧河
        我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河
        我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河
        我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河 我爱慧河
    </p>

</body>

</html>

在这里插入图片描述

使用clear: left:

.middle {
    clear: none;
    background: teal;
    clear: left;
}

在这里插入图片描述
使用clear: right:

.middle {
    clear: none;
    background: teal;
    clear: right;
}

在这里插入图片描述
用clear: both效果与上图类似。

通过clear和以下一些手段的结合可以有效解决之前高度塌陷的问题。

（2）父级元素定义高度

因为清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度为0的问题，那我们只要给父级元素直接定义高度就可以解决问题。

这个方法比较简单，直接给父级元素的 height设置一定的值就行。不过这样就写死了，不过当整体布局确定时可以使用，比较方便 。

（3）结尾添加空标签，给其设置 clear：both

直接在高度塌陷的父元素的最后添加一个空的div，由于这个div没有浮动，所以它可以撑开父元素的高度，然后对其进行清除浮动，通过这个空白div来撑起父元素的高度，clear：both 本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。缺点是添加无意义标签，语义化差。

<!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>
        .one {
            border: 10px solid rebeccapurple;
        }

        .two {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            float: left;
        }

        .add{
            clear: both;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="two"></div>
        <div class="add"></div>
    </div>
</body>

在这里插入图片描述

（4）::after伪元素清除浮动（推荐）

添加空标签的改进方法，使用::after伪元素在父元素后添加非浮动内容来撑起父元素高度，并且不会导致页面结构冗余。

.one::after{
    content: "";
    display: block;
    clear: both;
}
（5）使用before和after双伪元素清除浮动（推荐）
.one::after,
.one::before {
    content: "";
    display: table;
}

.one::after {
    clear: both;
}
（6）父级添加overflow: hidden（触发BFC)不推荐使用

overflow: hidden在内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，不推荐使用。

.one {
    border: 10px solid rebeccapurple;
    overflow: hidden;
}

二、定位

1、为什么需要定位

设想下面两个效果：

（1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。

（2）当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

所以： 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档中的定位方式。

边偏移则决定了该元素的最终位置。

2、定位模式与边偏移

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置：

选择器 { 
    position: 属性值; 
}
值语义
static静态定位（默认）
relative相对定位
absolute绝对定位
fixed固定定位

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性：

边偏移值属性示例描述
toptop：80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom：80px底部偏移量，定义元素相对于其父元素下边线的距离
leftleft：80px左侧偏移量，定义元素相对于其父元素左边线的距离
rightright：80px右侧偏移量，定义元素相对于其父元素右边线的距离
3、相对定位

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

简单应用

<!DOCTYPE html>
<html lang="en">

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

    <head>
        <style type="text/css">
            .box {
                background: yellowgreen;
                width: 100px;
                height: 100px;
                float: left;
                margin: 5px;
            }

            .two {
                position: relative;
                top: 50px;
                left: 50px;
            }

            .one {
                background: blue;
            }

            .three {
                background: skyblue;
            }

            .four {
                background-color: plum;
            }
        </style>
    </head>

</head>

<body>
    <div class="box one" id="1">One</div>
    <div class="box two">Two</div>
    <div class="box three">Three</div>
    <div class="box four">Four</div>
</body>

</html>

在这里插入图片描述

4、绝对定位
（1）绝对定位的特点：
  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
  2. **如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。 **
  3. 绝对定位不再占有原先的位置。（脱标） 所以绝对定位是脱离标准流的。
（2）子绝父相

1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

2、父盒子需要加定位以限制子盒子在父盒子内显示。

3、父盒子布局时，需要占有位置，因此父盒子需要是相对定位。

4、子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

.two {
    position: absolute;
    top: 50px;
    left: 50px;
}

在这里插入图片描述

5、固定定位

所谓固定定位，是元素固定于浏览器可视区的位置。主要特点为： 在浏览器页面滚动时元素的位置不会改变。

<!DOCTYPE html>
<html lang="en">

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

    <head>
        <style type="text/css">
            .box {
                background: yellowgreen;
                width: 100px;
                height: 100px;
                float: left;
                margin: 5px;
            }

            .two {
                position: fixed;
                top: 0px;
                right: 0px;
            }

            .one {
                background: blue;
            }

            .three {
                background: skyblue;
            }

            .four {
                background-color: plum;
            }

            .long {
                width: 1000px;
                height: 10000px;
                background-color: blanchedalmond;
            }
        </style>
    </head>

</head>

<body>
    <div class="box one" id="1">One</div>
    <div class="box two">一条烦人的小广告</div>
    <div class="box three">Three</div>
    <div class="box four">Four</div>
    <div class="box long"></div>
</body>

</html>

在这里插入图片描述

6、一些其他内容
（1）绝对定位的盒子居中

注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法：

请添加图片描述

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
  2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

请添加图片描述

（2）定位特殊特性

绝对定位和固定定位也和浮动类似：

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是显示模式， 可以改变显示模式有以下方式:

可以用inline-block 转换为行内块

可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）

绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

（3）绝对定位（固定定位）会完全压住盒子

浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字

如图：

在这里插入图片描述

但是绝对定位（固定定位） 会压住下面标准流所有的内容

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。

Asitwas
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS布局-浮动布局
Eleven_Deng的博客
09-02 200
一、浮动流排版方式 1.浮动流是一种"半脱离标准流"的排版方式 ​ 2.浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐 - 浮动元素字围现象 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象 注意点: 1.浮动流中没有居中对齐, 也就是没有center这个取值 2.在浮动流中是不可以使用margin: 0 auto; - 高度塌陷 当为子元素设置浮动以后，子元素会完全脱离文档流...
CSS基础学习（3）——浮动和定位
ITMonkeyKing的博客
02-10 715
单依靠盒模型布局不能满足所有网页设计需求，本文介绍浮动布局和定位布局。
CSS定位与浮动
m0_49034593的博客
08-18 2165
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
CSS布局之浮动和定位
Bulut0907
02-06 4449
目录1. 浮动1.1 浮动元素的特性1.2 清除浮动1.2.1 额外标签法1.2.2 父盒子添加overflow属性1.2.3 父盒子添加after伪元素1.2.4 父盒子添加双伪元素2. 定位 1. 浮动 网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动 网页布局第二准则：先设置盒子大小，再设置盒子位置 1.1 浮动元素的特性 任何元素都可以浮动 浮动元素脱离标准流，不占用标准流的空间。所以会影响浮动的元素后面的标准流元素位置 一个盒子内的元素如果一个元素浮动，则所有元素应
CSS基础：浮动（float）的3种方式，清除浮动3种方式的详解
最新发布
u013179804的博客
04-22 818
CSS 中常见的传统布局方式，包括普通流（标准流）、定位和浮动。这三种方式是网页布局中常用的基本手段，可以实现不同的排列和定位效果。所谓普通流，也称为标准流或文档流，是指在没有进行特殊定位或浮动的情况下，元素按照其在 HTML 文档中的顺序从上到下依次排列的布局方式。在普通流中，块级元素会垂直排列，各元素占据自己的一行，内联元素则水平排列在各自所在的行内。这种布局方式是 HTML 元素默认的排列方式，也是最常见的网页布局方式之一。所谓定位，就是咱们之前文所说的。
【CSS】浮动布局
Shadow Kylin的博客
09-16 1314
浮动是网页布局最古老的方式。浮动一开始并不是为了网页布局而设计，它的初衷是。。
CSS之页面布局之一（浮动布局）
JackZhang的专栏
11-10 3736
浮动布局是非常经典常见的页面布局方式。 实现方式很简单，第一步先
CSS浮动与定位（一）
ck1n9的博客
12-11 427
浮动 规则CSS允许浮动任何元素，使用float属性来实现。浮动元素会从正常流中删除，不过他仍然会影响到布局。 首先要明确任何浮动元素都会生成一个块级框，不论这个元素本身是什么。浮动元素会从正常流中删除，对于一个非替换元素，若想使用浮动，需指定宽度width。 CSS2.1关于浮动的规则如下：1.浮动元素的左（或右）外边界不能超出其包含块的左（或右）外边界。2.为了防止浮动元素重叠，一个浮动元素
CSS3定位和浮动详解
12-13
在CSS3中，定位和浮动是两种非常关键的布局技术，它们允许开发者精确控制网页元素在页面上的位置和排列方式。下面将详细讲解这两个概念及其相关的属性。 **一、定位** 1. **CSS定位**: 定位是通过CSS的`position`...
DIVCSS布局：CSS浮动float属性详解.doc
01-08
浮动(float)属性是CSS布局中的一个关键特性，主要用于创建流式布局、多列布局以及解决元素定位问题。在传统表格布局中，我们依赖表格的对齐方式来组织内容，但在Web标准开发中，浮动属性成为了实现灵活布局的核心...
详解DIV+CSS布局的好处和意义
09-25
10. **有利于搜索引擎优化**：搜索引擎更喜欢结构化、无冗余代码的页面，CSS布局有助于提升搜索结果的排名。 11. **布局灵活性**：相比于表格布局，Div+CSS提供了更多布局可能性，如流式布局、网格布局等。 12. **...
CSS布局详解浮动属性Float.pdf
11-26
标题中的“CSS布局详解浮动属性Float”指的是CSS布局中的一项重要技术——浮动（Float），它在网页设计中扮演着关键角色。描述虽然未提供具体内容，但可以推测文章将深入探讨浮动属性及其在创建网页布局中的应用。 ...
【CSS】浮动+定位
m0_68808168的博客
08-01 498
float，css的一种属性，主要属性值为left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。原理使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。粘性定位的元素是依赖于用户的滚动，在。基于用户的滚动位置来定位。...
CSS浮动与定位
农夫阿才
08-09 405
文章目录定位相对定位 定位 相对定位 使用相对定位的盒子，它会相对于它原本的位置，通过偏移到达新的位置。 使用相对的盒子仍在标准文本流中，它对父块和兄弟盒子没有任何影响。 ...
6.CSS布局 -- 浮动布局
weixin_44681760的博客
05-16 677
CSS布局
CSS基础（四）——浮动布局
pro1822的博客
03-27 7984
CSS基础（四）——浮动布局
CSS 浮动(float)注意点
soindy
03-20 2923
浮动布局 浮动是一种半脱离标准流的排版方式 没有居中对齐 使用 margin: 0 auto; 没有作用 不区分块级元素/行内元素/行内块级元素,因为这标准流中的概念 浮动的排序规则 相同方向的浮动元素,先浮动的显示在前面.因为浮动只会盖住标准流. 不同方向的浮动元素,左浮找左浮,右浮找右浮 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定. 贴靠现象: 如果浮动的最后一个元素超过
CSS浮动定位与背景样式
明哥
07-16 258
在CSS中，浮动（float）是一种元素定位的属性。通过设置元素的浮动属性，可以使元素脱离正常文档流，并向左或向右浮动到其容器内的指定位置。浮动元素会尽可能地靠近容器的左侧或右侧，并且其他内容会环绕在其周围。可以创建多列布局、图文混排等效果。浮动元素常用的属性如下：– 将元素向左浮动。– 将元素向右浮动。当元素浮动时，它会尽量靠近容器的边缘，并且周围的内容会被重新布局以适应浮动元素的位置。但需要注意的是，浮动元素不会占据正常文档流的空间，这可能导致浮动元素之后的元素与浮动元素重叠。
CSS布局（浮动）
m0_73370458的博客
03-28 288
CSS布局（浮动）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值