css浮动float

最新推荐文章于 2023-10-18 21:02:51 发布

Faith_gyz

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量199

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43667537/article/details/109356975

版权

了解浮动之前，先要了解传统网页布局的三种方式

在这里插入图片描述

二、为什莫需要浮动

在这里插入图片描述

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>
        .box1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: rgb(0,153, 255);
        }
    </style>
</head>
<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流盒子</div>
</body>
</html>

加入浮动的前后截图如下：
在这里插入图片描述

当有三个标准流，给第二个盒子加上浮动

当标准流如下图所示时

经过浮动，会变成下图所示

在这里插入图片描述

2、浮动元素一行内显示并且上沿对齐。

当浏览器站不下时会换行。
在这里插入图片描述

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

在这里插入图片描述

三、浮动元素经常搭配标准流父元素使用

在这里插入图片描述
如下网页：一个标准流里面放了四个浮动流

四、为甚麽清楚浮动

在这里插入图片描述

平常应用中不知道要有多少子元素，就像淘宝中不知道要有多少产品，所以实际开发中不会直接设置父盒子的高度，往往让子元素撑开父盒子。当父盒子里面的子元素都不添加浮动时，父盒子果然被子元素撑开。但是当子元素都加上浮动后，发现父盒子的高度变成了0.这是因为加了浮动的子元素飘在空中，不再占有位置。
在这里插入图片描述
添加浮动之前

添加浮动之后父盒子高度变成了0

再给父盒子添加一个兄弟，即给子元素添加二大爷（背景是黑色），变成了
如下图

闭合浮动是说把“飘了的子元素”限制在家里（添加了浮动的子元素只在父元素中可以“飘”）

五、如何清除浮动

在这里插入图片描述

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>
        .box{
            width: 600px;
            border: black 1px solid;
            margin: 0 auto;
        }
        .damao{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;

        }
        .ermao{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .erdaye{

            background-color: black;
            height: 300px;
        }
        .clear{
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="clear"></div>
    </div>
    <div class="erdaye"></div>
</body>
</html>

加上的前后如下：
在这里插入图片描述

2、父级添加overflow属性

在这里插入图片描述

3、清除浮动之after伪元素
在这里插入图片描述

<!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:"";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix{  /*IE6、7专有*/
            *zoom: 1;
        }
        .box{
            width: 600px;
            border: black 1px solid;
            margin: 0 auto;
        }
        .damao{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;

        }
        .ermao{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .erdaye{

            background-color: black;
            height: 300px;
        }
        
    </style>
</head>

<body>
    <div class="box clearfix"  >
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="erdaye"></div>
</body>
</html>

4、双伪元素
在这里插入图片描述

在父元素前后都加上一堵墙
在这里插入图片描述

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Faith_gyz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css浮动float

了解浮动之前，先要了解传统网页布局的三种方式二、为什莫需要浮动1、浮动元素会脱离标准流上面的两个图是设置浮动之后，穿粉红色衣服的人漂浮到空中，后面的人会把他之前的位置占掉，不会为其保留。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
复制链接

扫一扫