前戏

前面我们学习了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. Shader第二十八讲 Compute Shaders

    http://blog.sina.com.cn/s/blog_471132920102w97k.html 首先简单介绍GPGPU programming 和CPU Random Memory Acce ...

  2. uoj#273. 【清华集训2016】你的生命已如风中残烛（组合数学）

    传送门 一道打表题 我们把那些普通牌的位置看成\(-1\),那么就是要求有多少个排列满足前缀和大于等于\(1\) 考虑在最后放一个\(-1\),那么就是除了\(m+1\)的位置前缀和都要大于等于\(1 ...

  3. 稳定UI运行结果-自动化测试失败重试和截图

    运行自动化测试的时候,有时会因为网络不稳定,测试环境或者第三方环境正在重启而造成用例运行结果不稳定,时而能跑过时而跑不过.这些难以重现的环境因素造成的用例失败会让测试人员很困扰,排查即耗费时间也没有太 ...

  4. Linux权限相关

    权限分组 用户:文件所有者 用户组:多个用户的集合 其他:除了用户和用户组之外的任何用户 权限类别 r:表示读的权限 w:表示写的权限 x:表示执行的权限 s:表示setuid权限,允许用户以其拥有者 ...

  5. sql server 2012 导出sql文件

    导出表数据和表结构sql文件 在工作中,经常需要导出某个数据库中,某些表数据:或者,需要对某个表的结构,数据进行修改的时候,就需要在数据库中导出表的sql结构,包括该表的建表语句和数据存储语句!在这个 ...

  6. PostgreSQL - 用psql 运行SQL文件

    对于预先写好的SQL文件,比如/home/user1/updateMyData.sql, 可以有两种方式来运行这个SQL文件. 方式一:连接db后执行SQL文件 首先通过psql连接到对应的db: p ...

  7. Codeforces Round #533(Div. 2) D.Kilani and the Game

    链接:https://codeforces.com/contest/1105/problem/D 题意: 给n*m的地图,最多9个人,同时有每个人的扩张次数(我开始以为是直线扩张最大长度..实际是能连 ...

  8. Python enumerate() 函数----枚举

    描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. Python 2.3. 以上版本可用,2. ...

  9. 使用tmodjs

    1.安装 npm install -g tmodjs 2.配置 我的模板都放在tpl文件夹中,htmls用于存放模板页面,每一个后缀名都是.html,而build用于存放编译后输出的模板js. 如果不 ...

  10. [已读]JavaScript高级程序设计(第2版)

    经典红皮书~~