Float浮动

最新推荐文章于 2024-10-03 23:01:58 发布

韵然CP

最新推荐文章于 2024-10-03 23:01:58 发布

阅读量540

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_40354578/article/details/93850368

版权

JavaWeb 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

float的四个参数：

-float:left -float:right -float:none 不浮动 -float:inherit 继承浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .test{
            width: 300px;
            height: 300px;
            font-size: 100px;
            background-color: brown;
            float:left;
            margin-right: 10px;
        }
        .test1{
            width: 100px;
            height: 100px;
            background-color:chartreuse;
            float: inherit;;
        }
        .test2{
            width: 100px;
            height: 100px;
            background-color:cyan;
            float:right;
        }
    </style>
</head>
<body>
    <div class="test">
    <div class="test1">1</div>
    <div class="test2">2</div>
</body>
</html>

这里其实有很多种- -我只写了一部分，如果是none那就是对这一行都生效，inherit这种情况一定要有继承关系才有用！

有意思的是test1，test2继承了test的字体设置

我们的test里设置的不是none所以他们都堆在一起哎，test1继承了test的左浮动

当我们把test设置成none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .test{
            width: 300px;
            height: 300px;
            font-size: 100px;
            background-color: brown;
            float:none;
            margin-right: 10px;
        }
        .test1{
            width: 100px;
            height: 100px;
            background-color:chartreuse;
            float: inherit;;
        }
        .test2{
            width: 100px;
            height: 100px;
            background-color:cyan;
            float:right;
        }
    </style>
</head>
<body>
    <div class="test">
    <div class="test1">1</div>
    <div class="test2">2</div>
</body>
</html>

实现文字环绕效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float</title>
    <style>
        .per{
            width: 400px;
            height: 400px;
            border:1px solid #CCC;
        }
        img {
            width: 100px;
            height: 100px;
            float:right;
        }
        </style>
</head>
<body>
    <div class="per">
        <img src="logo.png" width="100" alt="">
        小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油小猪加油
    </div>
</body>
</html>

float效果有脱离文本的效果，脱离了正常的文档流但是依旧占据文本空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .per{
            width: 500px;
            height: 1px;
            border: 1px solid #000;
        }
        .test{
            width: 100px;
            height: 30px;
            background-color:red;
            float: left;
            border: 1px solid #FFF;
        }
        </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
</body>
</html>

这就是我们浮动的副作用啦，父元素的高度发生了塌陷

为了解决这种副作用我们将

1.手动给父元素添加高度

2.通过clear清除内部和外部浮动

3.父元素添加overflow属性并结合zoom：1使用

4.给父元素添加浮动

2.-clear:none

-clear：left 不允许左边有浮动的对象

-clear：right 不允许右边有浮动的对象

-clear: both 不允许有浮动的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .per{
            width: 500px;
            height: 1px;
            border: 1px solid #000;
        }
        .test1{
            width: 100px;
            height: 100px;
            float: left;
            background-color: brown;
        }
        .test2{
            width: 120px;
            height: 120px;
            clear: left;
            background-color: blue;
        }
        </style>
</head>
<body>
    <div class="per">
        <div class="test1"></div>
        <div class="test2"></div>
    </div>
</body>
</html>

3.父元素添加overflow属性并结合zoom：1使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            overflow: auto;
            zoom: 1;
        }
        .test{
            width: 100px;
            height: 100px;
            float: left;
            border: 1px solid #000;
            background-color: brown;
        }
        </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
</body>
</html>

4.给父元素添加浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .per{
            width: 500px;
            height: auto;
            float: left;
            border: 1px solid #000;
        }
        .test{
            width: 100px;
            height: 100px;
            float: left;
            border: 1px solid #000;
            background-color: brown;
        }
        </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
</body>
</html>