前戏

前面我们学习了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>

给父元素设置高度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>

经常测试，发现真是这样的，那我们使用添加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>

使用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>

我们给父元素也加上浮动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>

点我偷看

css--float浮动的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  3. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  4. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  5. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  6. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  7. css float 浮动

    CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...

  8. CSS：CSS Float(浮动)

    ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...

  9. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

  10. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

随机推荐

  1. 如何将基于对话框的MFC工程改成基于BCG的

    1.stdafx.h 加入如下内容.BCGCBProInc.h间接导入了lib. 2.应用程序类的父类由CWinApp改成CBCGPWinApp.构造函数增加如下代码: 3.对话框的父类有CDialo ...

  2. lightoj1010【LCS】

    题意: 求最长公共子序列,并且这个子序列是字典序最小. 思路: LCS附一个值,dp[i][j].first代表以i,j的LCS的长度,dp[i][j].second代表LCS结尾元素,然后利用路径输 ...

  3. Unity3D - 动作动画忽略timeScale

    http://blog.csdn.net/ynnmnm/article/details/46866347 最近在调战斗时的动画与特效,Unity3D对加/减速提供了Time.timeScale支持.但 ...

  4. POI刷题记录

    POI2007 HNOI2018滚粗后,默默来刷POI 先从2007刷起 bzoj1103[POI2007]大都市meg bzoj1098[POI2007]办公楼biu bzoj1102[POI200 ...

  5. python_argparse

    使用python argparser处理命令行参数 #coding:utf-8 # 导入模块 import argparse # 创建ArgumentParser()对象 parser = argpa ...

  6. IP服务-4-HSRP，VRRP和GLBP

    HSRP(热备份路由器协议).VRRP(虚拟路由器冗余协议)和GLBP(网关负载均衡协议) 当主机只知道一个IP地址能够用来访问子网外部时,可能会出现一些问题,这些协议正好解决了这一隐患. HSRP允 ...

  7. 【loj10064】黑暗城堡

    #10064. 「一本通 3.1 例 1」黑暗城堡 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统    评测方式:文本比较 上传者: 1bentong 提交     ...

  8. Shortest Path Codeforces - 59E || 洛谷P1811 最短路_NOI导刊2011提高（01）

    https://codeforces.com/contest/59/problem/E 原来以为不会..看了题解发现貌似自己其实是会的? 就是拆点最短路..拆成n^2个点,每个点用(i,j)表示,表示 ...

  9. JS中的关系操作符与自动转型

    很多时候对数据操做时都会遇到数据转换,有的是显示转化,有的是隐式转化,即调用默认的规则进行数据转换,经常会把数据转换的方式搞混,于是就花了点时间做了个小小的总结: 一元操作符(--,++,-,+)作用 ...

  10. django 模板语言的注释操作

    Django在HTML里面书写的模板语言不能使用这种方法注释,这样注释实际依然有效 <!--{% if text %}--> 第一种使用模板标签{% comment %}注释,这是块注释 ...