CSS-浮动

可可格子衫

已于 2022-07-06 00:01:40 修改

阅读量661

点赞数

文章标签：前端 html css

于 2022-07-05 23:46:45 首次发布

本文链接：https://blog.csdn.net/weixin_51745081/article/details/125615320

版权

前言

一、浮动的作用

二、浮动的特点

1.浮动的元素会脱离标准流（简称：脱标），在标准流中不占位置

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

前言

目标：能够认识使用浮动的作用，了解浮动的特点。

一、浮动的作用

让块级标签(div)完美地在一行排列。

转行内块也可以实现两个div标签在一行排列

代码如下（示例）：

运行后发现两个块标签之间存在间隔（浏览器解析行内块或行内标签的时候，如果标签换行会造成间隔）

为了消除块标签与块标签之间的间隔，使得块与块完美地在一行排列，最简单的方法就是把所有的div写在一行里

但显然这种方法并不适用于未来工作，那么该如何完美地没有间距的排列这些块元素呢？

这就需要用到浮动。

早期的作用是：图文环绕

代码如下（示例）：

<style>
        img{
            float: left;
        }
    </style>

<body>
    <img src="./image.png" alt="">
    左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片左边是一张图片
</body>

现在的作用是：网页布局

代码如下（示例）：

    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            float: left;
            background-color: pink;
        }
        .two{
            float: left;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>

二、浮动的特点

1.浮动的元素会脱离标准流（简称：脱标），在标准流中不占位置

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素（半覆盖）

代码如下（示例）：

    <style>
        .one{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            /* one脱离标准流，不再占用原来的位置 */
            /* 只是半脱标，即能覆盖块标签，但不能覆盖文字 */
        }
        .two{
            width: 150px;
            height: 150px;
            background-color: skyblue;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

one代码块不能覆盖two代码块的文字，体现半覆盖

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

代码如下（示例）：

/* 浮动的标签默认顶对齐 */
/* 浮动：在一行排列，宽高生效 具备行内块的特点 */
<style>
        .one{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            /* one脱离标准流，不再占用原来的位置 */
        }
        .two{
            float: left;
            width: 150px;
            height: 150px;
            background-color: skyblue;           
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

注意three文字的位置

4.浮动元素有特殊的显示效果

一行可以显示多个
可以设置宽高

注意点：浮动的元素不能通过text-align:center或者margin:0 auto实现水平居中

三.CSS属性顺序

会使得浏览器执行效率变高，提升用户体验

浮动/display
盒子模型相关属性（margin border padding 宽度高度背景色）
文字样式

四.清除浮动

1.含义：清除浮动带来的影响

影响：如果子元素浮动了，此时元素不能撑开标准流的块级父元素

例如：父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到最高位置

（灰色和蓝色在盒子top里，背景为粉色灰色：left 蓝色：right 绿色：bottom)

2.清除浮动的方法

（1）直接设置父元素高度

但有些布局中不能固定父元素高度。如：新闻列表、电商网站推荐模块

（2）额外标签法

操作：

1、在父元素内容的最后加一个块级元素

2、给添加的块级元素设置clear:both

特点：

会在页面中添加额外的标签，会让HTML结构变得复杂

代码如下（示例）：

    <style>
        .top{
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        .bottom{
            height: 100px;
            background-color: green;
        }

        .left{
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right{
            float:right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        .clearfix{
            /* 清除左右两侧浮动 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 清除浮动 -->
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

（3）单伪元素清除法

/* 在父级标签中增加clearfix类 */
<div class="top clearfix" >

基本写法：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

补充写法（为了兼容性）：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

特点：项目中使用，直接给标签加类即可清除浮动

和额外标签法原理是一样的，工作中常用。

（4）双伪元素清除法

代码如下（示例）：

/* .clearfix::before 作用：解决外边距塌陷问题
   外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置
*/
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display:table;
        }
        /* 真正清除浮动的标签 */
        .clearfix::after{
            clear: both;
        }

（5）直接在父级加overflow:hidden

代码如下（示例）：

.top{
      margin: 0 auto;
      width: 1000px;
      /* height: 300px; */
      background-color: pink;
      overflow: hidden;
        }

清除浮动后显示为：

总结

以上就是今天学习总结的浮动相关内容，本文仅仅简单介绍了浮动的使用，而后面还需要不断学习融入新的知识。