三、float浮动

最新推荐文章于 2022-12-16 19:00:00 发布

杨691

最新推荐文章于 2022-12-16 19:00:00 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/kissing_yang/article/details/118528716

版权

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：

浮动元素会生成一个块级框，而不论它本身是何种元素

浮动会使元素脱离文档流进入浮动层,会将下面的元素遮挡但不会遮挡其内容

如果在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

none- 默认值不进行浮动

left- 左浮动

right- 右浮动

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            background-color: palegreen;
        }

        .d2 {
            background-color: purple;
        }

        .d3 {
            background-color: pink;
        }

        .d4 {
            background-color: yellowgreen;
        }

        .dd {
            float: left;
            width: 200px;
            height: 200px;

        }

        .d5 {
            height: 210px;
            width: 200px;
            background-color: bisque;
        }

        
    </style>
</head>

<body>
    <div class="wai">
        <span class="dd d1">1</span>
        <span class="dd d2">2</span>
        <span class="dd d3">3</span>
        <span class="dd d4">4</span>
    </div>
    <div class="d5">asdasdasdas</div>
</body>
</html>

3.1 清除浮动

高度坍塌

如果父标签中的所有元素标签都进行了浮动，并且父标签没有设置高度，这样就会导致父标签的高度坍塌，会使浮动元素遮挡下面的元素，可能会导致布局的混乱，解决高度坍塌的方式叫清除浮动

3.1.1 定高法

为父标签添加高度，使其可以进行高度设置，这样之后的内容就不会被遮盖,但是如果页面发生更改，元素继续下浮换行还是会继续遮挡其他元素，所以这种方法一般适用于位置已经固定（同时设置宽高并且元素不会超出的情况）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            background-color: palegreen;
        }

        .d2 {
            background-color: purple;
        }

        .d3 {
            background-color: pink;
        }

        .d4 {
            background-color: yellowgreen;
        }

        .dd {
            float: left;
            width: 200px;
            height: 200px;

        }

        .d5 {
            height: 210px;
            width: 200px;
            background-color: bisque;
        }
        /* 定高法:为父标签添加指定高度 */
        .wai{
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="wai">
        <span class="dd d1">1</span>
        <span class="dd d2">2</span>
        <span class="dd d3">3</span>
        <span class="dd d4">4</span>
    </div>
    <div class="d5">asdsadad</div>
</body>

</html>

3.1.2 添加额外标签

在父标签中添加一个块级标签,设置宽高撑起父标签，但是如果页面发生更改，元素继续下浮换行还是会继续遮挡其他元素，所以这种方法一般适用于位置已经固定（设置高并且元素不会超出的情况），建议不要使用这种方法，因为这种方法会添加一个额外的元素，在后期进行维护时可能会被删除

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            background-color: palegreen;
        }

        .d2 {
            background-color: purple;
        }

        .d3 {
            background-color: pink;
        }

        .d4 {
            background-color: yellowgreen;
        }

        .dd {
            float: left;
            width: 200px;
            height: 200px;

        }

        .d5 {
            height: 210px;
            width: 200px;
            background-color: bisque;
        }

      
        /* 额外添加块标签:设置宽高撑起父标签 */

        .add {
            height: 200px;
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="wai">
        <span class="dd d1">1</span>
        <span class="dd d2">2</span>
        <span class="dd d3">3</span>
        <span class="dd d4">4</span>
        <div class="add"></div>
    </div>
    <div class="d5">asdsadad</div>
</body>

</html>

3.1.3 使用clear属性清除浮动

使用该属性可以请求之后标签的浮动换行，使其在浮动后显示，即使页面发送改变也不会覆盖其元素标签,也可以用到没有直接父标签的情况,直接使用空的div标签设置该属性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            background-color: palegreen;
        }

        .d2 {
            background-color: purple;
        }

        .d3 {
            background-color: pink;
        }

        .d4 {
            background-color: yellowgreen;
        }

        .dd {
            float: left;
            width: 200px;
            height: 200px;

        }

        .d5 {
            height: 210px;
            width: 200px;
            background-color: bisque;
        }

        /* 在父标签后的标签添加清除浮动属性 */
        .d5{
            clear: both;
            /* 清除前后浮动换行 */
        }
    </style>
</head>

<body>
    <div class="wai">
        <span class="dd d1">1</span>
        <span class="dd d2">2</span>
        <span class="dd d3">3</span>
        <span class="dd d4">4</span>
    </div>
    <div class="d5">asdsadad</div>
</body>

</html>

3.1.4 使用overflow:hidden清除浮动

对父标签设置overflow:hidden后就不会覆盖之后的元素内容,通过设置溢出隐藏，如果设置了宽高，那么溢出的元素将被隐藏，如果内容过多将显示不完全，如果没有设置宽高，那么将由浮动元素撑起

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            background-color: palegreen;
        }

        .d2 {
            background-color: purple;
        }

        .d3 {
            background-color: pink;
        }

        .d4 {
            background-color: yellowgreen;
        }

        .dd {
            float: left;
            width: 200px;
            height: 200px;

        }

        .d5 {
            height: 210px;
            width: 200px;
            background-color: bisque;
}
        /* 父标签设置overflow: hidden */
        .wai{
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="wai">
        <span class="dd d1">1</span>
        <span class="dd d2">2</span>
        <span class="dd d3">3</span>
        <span class="dd d4">4</span>
    </div>
    <div class="d5">asdsadad</div>
</body>

</html>

3.1.5 使用伪元素：after

常用清除浮动的方法，同常是设置一个指定class的css代码块，只需要在需要请求浮动的父元素添加指定的class即可

 /* 使用after伪元素的设置 */
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1 {
background-color: palegreen;
}

.d2 {
background-color: purple;
}

.d3 {
background-color: pink;
}

.d4 {
background-color: yellowgreen;
}

.dd {
float: left;
width: 200px;
height: 200px;

}

.d5 {
height: 210px;
width: 200px;
background-color: bisque;
}

/* 定高法:为父标签添加指定高度
.wai{
height: 200px;
width: 200px;
} */
/* 额外添加块标签:设置宽高撑起父标签
.add {
height: 200px;
width: 200px;
} */
/* 在父标签后的标签添加清除浮动属性
.d5{
clear: both;
清除前后浮动换行
} */

/* 父标签设置overflow: hidden
.wai{
overflow: hidden;
} */

/* 使用after伪元素的设置 */
.wai::after{
content: "";
display: block;
clear: both;
}
</style>
</head>

<body>
<div class="wai">
<span class="dd d1">1</span>
<span class="dd d2">2</span>
<span class="dd d3">3</span>
<span class="dd d4">4</span>
</div>
<div class="d5">asdsadad</div>
</body>

</html>

杨691

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三、float浮动

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：浮动元素会生成一个块级框，而不论它本身是何种元素浮动会使元素脱离文档流进入浮动层,会将下面的元素遮挡但不会遮挡其内容如果在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。none- 默认值不进行浮动left- 左浮动
复制链接

扫一扫