前戏

前面我们学习了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. lightoj1060【康托逆展开】

    可以先看些资料:http://blog.csdn.net/keyboarderqq/article/details/53388936 参考谷巨巨:http://blog.csdn.net/azx736 ...

  2. 初次接触Service笔记

    Service是后台的运行的小程序,分两种一种是StarService()另外一种是bindService(),这种可调用Service中的方法和返回结果等操作而StarService不能 他的生命周 ...

  3. iOS开发 - CocoaPods的常见使用方式

    1 CocoaPods 的安装 1.1 作用: 帮助管理和维护第三方框架,快速的搜索到第三方框架, 然后自动集成到工程里面来, 并编译成一个libPod.a的静态库给我们项目用 1.2 理解:  1. ...

  4. StringUtils.split()和string.split()的区别

    场景 出于业务考虑,将多个字符串拼接起来时,使用的分隔符是;,;.如果要将这样一个拼接来的字符串分割成原本的多个字符串时,就需要使用到jdk自带的split()方法.不过因为公司的编程规范,改为使用了 ...

  5. idea | 命名空间改过后重新导入项目方法

    file菜单-->Open-->找到项目中pom文件-->会提示as project 和as file-->选择as project,会自动生成idea所有相关的文件

  6. base64模块

    ********base64模块******** Base64是一种用64个字符来表示任意二进制数据的方法. 用记事本打开exe.jpg.pdf这些文件时,我们都会看到一大堆乱码,因为二进制文件包含很 ...

  7. 洛谷 P1094 纪念品分组

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

  8. Metasploits之ms10_018

    漏洞详情:https://technet.microsoft.com/library/security/ms10-018 一准备: 1:kali Linux系统 192.168.195.129 2:W ...

  9. Gridview基础

    gridview是封装好的,直接在设计界面使用,基本不需要写代码 1.绑定数据源 GridView最好与LinQDatasourse配合使用,相匹配绑定数据: 2.外观控制—— 点开有自动套用格式 布 ...

  10. 解析Javascript事件冒泡机制(转)

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...