前戏

前面我们学习了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. Elasticsearch学习记录(分布式的特性)

    Elasticsearch学习记录(分布式的特性) 分布式的特性 我们提到Elasticsearch可以扩展到上百(甚至上千)的服务器来处理PB级的数据.然而我们的例子只给出了一些使用Elastics ...

  2. perl C/C++ 扩展（三）

    第三讲扩展库使用c++实现,在调用函数后,返回对象变量,perl 能正确使用所有对象成员 使用h2xs 命令生成初始文件 h2xs -A -n three_test 登录目录 cd three_tes ...

  3. 单片机的C语言中位操作用法2

    单片机的C语言中位操作用法 在对单处机进行编程的过程中,对位的操作是经常遇到的.C51对位的操控能力是非常强大 的.从这一点上,就可以看出C不光具有高级语言的灵活性,又有低级语言贴近硬件的特点. 这也 ...

  4. python库使用整理

    1. 环境搭建 l  Python安装包:www.python.org l  Microsoft Visual C++ Compiler for Python l  pip(get-pip.py):p ...

  5. robot framework 在pycharm中语法无法高亮显示的，显示绿色解决办法（Robot Framework with PyCharm）

    Robot Framework with PyCharm up vote1down votefavorite 1 I am totally new to automation and trying t ...

  6. [已读]Nodejs高级编程

    封面太让人想吐槽了,真的很像<javascript高级程序设计>有木有 内容我觉得还不错,流畅,见过的nodejs书籍中最详细的一本.很多书会把express及使用案例作为重点,但是它不是 ...

  7. #82. 【UR #7】水题生成器

    链接:http://uoj.ac/problem/82 今天是世界水日,著名的水题资源专家蝈蝈大臣向世界宣布了他的一项新发明 —— 水题生成器. 每道题目都有一个正整数的难度值.水题生成器虽然强大但是 ...

  8. php调用c# webservice方法

    第一次用,通过,还没深入了解. 首先在php.ini中启用extension=php_soap.dll,重启apache. $Client=new SoapClient("url?wsdl& ...

  9. git与GitHub（一）

    相信,很多初入前端者都会对git以及GitHub不太了解,而我当时也经历过各种面试大关,也都会问:你了解git和GitHub吗?那么今天先来说一说git. 那么什么是git? (以下转载自廖雪峰老师的 ...

  10. 从javaweb项目学习

    1.sql语句 在insert语句中需要插入查询出来的值. Insert into a (a1,a2,a3) values (1,select num from b where id=1,3) 这样写 ...