前戏

前面我们学习了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——ComBox用法大全

    Combo Box (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项,同时也可以直接在文本框里面输入文本 ...

  2. jpa使用原生SQL查询数据库like的用法

    jpa使用like查询,需要拼接字符串,如下 oracle用法: //dao层代码 @Query(value = "SELECT * FROM TABLENAME WHERE USER_NA ...

  3. Django框架的安装,项目创建

    目录 Django框架的安装,项目创建 方法安装 Django版本选择 1.11.21(最新LTS版) django管理目录 命令行创建项目 django项目 命令行启动 (必须在项目文件下执行) p ...

  4. C语言带参宏定义和函数的区别

    带参数的宏和函数很相似,但有本质上的区别:宏展开仅仅是字符串的替换,不会对表达式进行计算:宏在编译之前就被处理掉了,它没有机会参与编译,也不会占用内存.而函数是一段可以重复使用的代码,会被编译,会给它 ...

  5. Android NFC P2P

    http://www.nfc.cc/2011/12/28/development-android-beam-and-nfc-peer-2-peer/

  6. hibernate错误总结1

  7. 大数（string 之间的快速幂）

    //字符串的乘法 string multi(string a, string b){ ], len = a.length() + b.length(); memset(arr, , sizeof ar ...

  8. JS中一个new到底做了哪些事情？

    1.https://www.cnblogs.com/faith3/p/6209741.html 2.https://www.cnblogs.com/AaronNotes/p/6529492.html

  9. [題解]（單調隊列dp）luogu_P1725琪露諾

    比較簡單的單調隊列,但是有一些要注意的 維護單調隊列的時候裡面存的是入隊時間,而不是i,因為前面有l個沒有入隊(不可能走進),所以把i减一个l以达到延迟入队的效果 #include<bits/s ...

  10. 洛谷 P1094 纪念品分组

    P1094 纪念品分组 先按价格对纪念品排序(这里是从大到小),然后从两端向中心开始配对,有两个变量i和j,表示正在处理的两个纪念品编号,开始时i=1,j=n,如果a[i]+a[j]>w则第i贵 ...