css--float浮动

其他 2019-06-17 23:01:25 阅读次数: 0

前戏

前面我们学习了CSS相关的知识，现在试想一下，如果我们想把两个div放在一行显示，该怎么处理？前面也说过，div是块级标签，默认占一行，这时候如果想要达成效果，那就要用到float了

float

float中的四个参数

float：left      左浮动

float：right     右浮动

float：none      不浮动

float：inherit   继承

先来看一下不加float的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red}
     </style>
</head>
<body>
        <div>1</div>
        <div>2</div>
</body>
</html>
left
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}

         div{float: left;
            margin-right: 10px;
         }

     </style>
</head>
<body>
        <div class="c1">1</div>
        <div class="c2">2</div>
</body>
</html>
right
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}

         div{float: right;
            margin-right: 10px;
         }

     </style>
</head>
<body>
        <div class="c1">1</div>
        <div class="c2">2</div>
</body>
</html>

注意：float：right时，两个div的顺序就反过来了，因为先把c1的浮动到最右边，然后浮动c2

none
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}

         div{float: none;
            margin-right: 10px;
         }

     </style>
</head>
<body>
        <div class="c1">1</div>
        <div class="c2">2</div>
</body>
</html>

none就是不浮动，就和默认的div一样的效果

inherit
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0}
        div{height:100px;width:100px;background: red;
            text-align: center;
         line-height: 100px;}

         .test{float: right;
            height: 200px;width: 200px;background: green;
         }
         .c1,.c2{
             float: inherit;
            margin-top:10px; }

     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
    </div>
</body>
</html>

代码解释：

我们给class为c1和c2的加上了float: inherit;给它的父元素加上了float: right，所以父元素会像右浮动，但是因为c1和c2继承了父元素的浮动，所以也会像右浮动，解释完毕。

float的副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;margin-right: 10px}
            .c3{background: green;height: 100px;width: 100px;}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c3"></div>

    </div>
</body>
</html>

我们可以看到，上面绿色的框产生了易位，原本是要想绿色的框在红色的下面显示，这就是浮动的副作用之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;}
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c3{background: green;height: 100px;width: 100px;}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
<!--        <div class="c3"></div>-->

    </div>
</body>
</html>

如果我们给上面的代码没有添加float，则子元素会把父元素的高度撑起来，加上float之后，父元素的高度就成了一条线。这也是float的副作用

清除浮动的副作用

清除浮动的副作用有四种方法

1. 手动给父元素设置高度

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

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

4.给父元素添加浮动

 手动给父元素设置高度

我们先来看一下副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;width:100px;}
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>

    </div>
</body>
</html>
View Code

给父元素设置高度height：30px；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                height:30px; }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>

    </div>
</body>
</html>

但是我们想一想，如果子标签有多个，是不是就超过了父元素的高度呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                height:30px; }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>

    </div>
</body>
</html>
View Code

经常测试，发现真是这样的，那我们使用添加overfloat属性并结合zoom来试一下，看能不能解决掉我们的问题

overflow
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                overflow: hidden;
                zoom: 1}
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>

    </div>
</body>
</html>

解释：overflow是将溢出的截取掉

经过测试发现，完美的解决了我们的问题

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

clear有四个属性

clear：none
clear：left    左边不允许有浮动
clear：right   右边不允许有浮动
clear：both    左右都不允许有浮动

先来看一下副作用的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                height:100px; }
            .c1{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c2{background: green;height:50px;width:30px;}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>


    </div>
</body>
</html>
View Code

使用clear：left解决副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                height:100px; }
            .c1{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c2{background: green;height:50px;width:30px;
                clear: left;
            }
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>


    </div>
</body>
</html>

其余的三个也是同理，就不做具体的演示

给父元素添加浮动

还是先看一下副作用的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>

    </div>
</body>
</html>
View Code

我们给父元素也加上浮动float：left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                float: left;
                }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>

    </div>
</body>
</html>

刷新之后，也能解决我们的问题，那给父元素添加一个兄弟元素看看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                float: left;
                }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c3{height: 100px;width: 100px;background: #4d4d4d}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>

    </div>
    <div class="c3">啦啦</div>
</body>
</html>

刷新之后发现，虽然父元素的问题解决了，但是它的兄弟标签有嵌入到了里面，我们可以给兄弟标签加上clear：both解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
            .test{border: 1px solid red;
                width:100px;
                float: left;
                }
            .c1,.c2{background: red;float: left;height: 30px;width: 20px;
                margin-right: 10px}
            .c3{height: 100px;width: 100px;background: #4d4d4d;
            clear: both}
     </style>
</head>
<body>
    <div class="test">
        <div class="c1">1</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>
        <div class="c2">2</div>

    </div>
    <div class="c3">啦啦</div>
</body>
</html>
点我偷看

小练习

使用浮动完成以下效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         *{padding: 0;margin: 0;}
         .test{background: #ccc;height: 32px;width: 700px;}
         .c2{float: left;margin-right:30px;line-height: 32px;}
         .icon{float: right}
         .d1{float: inherit;margin-left: 30px;line-height: 32px;}

     </style>
</head>
<body>
    <div class="test">
        <div class="a1">
            <div class="c2">测试</div>
            <div class="c2">开发</div>
            <div class="c2">产品</div>
            <div class="c2">UI</div>
        </div>

        <div class="icon">
            <div class="d1">python</div>
            <div class="d1">HTML</div>
            <div class="d1">CSS</div>
            <div class="d1">Js</div>
        </div>
    </div>

</body>
</html>
点我偷看

猜你喜欢

转载自www.cnblogs.com/zouzou-busy/p/11042366.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022