在css中float是一个非常好用的属性，float最基本用法是用来做文字环绕型的样式的。

基本用法：float:left | right

例如

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="div1">

        <P>

            <img src="Images/2.jpg" alt=""> 这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字这里有一大段超级长的文字

        </P>

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div class="div2"></div>

</body>

</html>

如果一段较长文字和图片放在一起，显示的效果如下

这里文字图片会把文字挤开，显得不好看。而给图片加上float属性后即可变成文字环绕型显示

img {

            float: left;

        }

结果为

而float最强大的用法是在盒子布局上。正常块级元素都是单独占一行，而使用float可以实现多个块级元素摆在一行。例如

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .div1 {

            width: 600px;

            height: 400px;

            background-color: red;

        }

        .left {

            width: 200px;

            height: 200px;

            background-color: orange;

            float: left;

        }

        .right {

            width: 200px;

            height: 200px;

            background-color: pink;

            float: left;

        }

    </style>

</head>

<body>

    <div class="div1">div1

        <div class="left">leftdiv</div>

        <div class="right">rightdiv</div>

    </div>

</body>

</html>

显示结果为

浮动的特点：

1、浮动，顾名思义就是浮起来动（废话！(╯°Д°)╯︵┻━┻），浮动相当于将网页分成上下两层，浮动的元素在上层，普通的元素在下层。通过下例可以直观的看出来：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .div2 {

            width: 800px;

            height: 200px;

            background-color: aqua;

        }

        .left {

            width: 200px;

            height: 200px;

            background-color: orange;

            float: left;

            margin-left: 30px;

        }

    </style>

</head>

<body>

    <div class="left">leftdiv</div>

    <div class="div2">div2</div>

</body>

效果图如下：

可以看到浮动的div将非浮动的div盖在了下面，因为他们是两层，所以相互之间并不会挤到对方，而想要解决这个问题，需要给浮动的标签嵌套一个外标签即可，这样可以让浮动只局限于一个标签进行。

外标签需要指明宽高大小才行，而有一些情况不能确定高度大小，这时候想要解决这个问题可以通过取消浮动来解决，具体可以查看CSS 小结笔记之取消浮动

2、浮动会自动对齐父盒子，但不会超过边框，也不会影响到父盒子的margin和padding，即浮动是在盒子内部浮动。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .fa {

            width: 200px;

            height: 200px;

            margin: 100px;

            background-color: aqua;

            padding: 50px;

            border: 10px orange solid;

        }

        .son {

            width: 100px;

            height: 100px;

            float: left;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son"></div>

    </div>

</body>

</html>

3、浮动的排列与上一个块级元素有关，上一个元素是浮动的，则与上一个元素头部对齐（宽度足够的情况），上一个元素不是浮动则与上一个元素的底部对齐。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .fa1,

        .fa2 {

            width: 200px;

            height: 200px;

            background-color: aqua;

            border: 5px solid pink;

            margin: 20px;

        }

        .fa1 .son1 {

            width: 50px;

            height: 50px;

            background-color: green;

            float: left;

        }

        .fa1 .son2 {

            width: 50px;

            height: 50px;

            background-color: red;

            float: left;

        }

        .fa2 .son1 {

            width: 50px;

            height: 50px;

            background-color: green;

        }

        .fa2 .son2 {

            width: 50px;

            height: 50px;

            background-color: red;

            float: left;

        }

    </style>

</head>

<body>

    <div class="fa1">

        <div class="son1"></div>

        <div class="son2"></div>

    </div>

    <div class="fa2">

        <div class="son1"></div>

        <div class="son2"></div>

    </div>

</body>

</html>

4、浮动会把元素改为行内块元素，因此有浮动时可以不需要再转换模式了。

CSS 小结笔记之浮动的更多相关文章

  1. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  2. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  3. CSS 小结笔记之清除浮动

    浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...

  4. html+css学习笔记 3[浮动]

    inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie ...

  5. CSS 小结笔记之定位

    定位也是Css中一个非常强大的属性.定位主要是用来移动盒子,将其移动到我们想要的位置. 定位分为两部分 1.边偏移 left | right |top |bottom:偏移大小:(边偏移一般制定上就不 ...

  6. HTML&CSS精选笔记_浮动与定位

    浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程. 如何定义浮动? 在CSS中,通过float属 ...

  7. CSS学习笔记：浮动属性

    目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...

  8. CSS 小结笔记之图标字体（IconFont）

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  9. CSS 小结笔记之em

    1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...

随机推荐

  1. Android activity之间的跳转和数据传递

    1.Activity之间的跳转 并且 传递数据 A Activity进行的操作 Intent intent = new Intent(context, B.class); intent.putExtr ...

  2. SocketIo+SpringMvc实现文件的上传下载

    SocketIo+SpringMvc实现文件的上传下载 socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: GIT地址 ...

  3. RSNAKE 的 Slowloris DOS攻击工具初试

    Slowloris 号称低带宽对服务器进行DDOS攻击 原理就是对WEB服务器发送 不完整的包并且以 单一  \r\n结尾,并不是 完整的HTTP包.造成WEB服务器堵塞达到最大连接数. 官网给出介绍 ...

  4. Windows下整合apache和Tomcat

    1.前言: 引用:http://www.cnblogs.com/liaokailin/p/3963603.html 引用的博客里面有比较详细的说明,并且结合图片,非常生动: 我这里只做简单的说明和整合 ...

  5. Oracle 12c 操作 CDB PDB

    CREATE TRIGGER open_all_pdbs AFTER STARTUP ON DATABASE BEGIN EXECUTE IMMEDIATE 'alter pluggable data ...

  6. JAVA 之 继承

    1:继承的定义: Java继承是面向对象的最显著的一个特征.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性和行为,并能扩展新的能力. 2:关键字: extends :继承 3:格式形式: ...

  7. Installing haproxy load balancing for http and https--转载

    This example will guide you through a simple IP based load balancing solution that handles ssl traff ...

  8. textarea的placeholder属性内容折行显示(PC和移动端端)

    1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeh ...

  9. Fiddler——PC上实现手机的抓包(转载 http://www.jianshu.com/p/13f8a81d7c7c)

    Fiddler是15年初,在千牛中做超级促销插件时,发现没有root的Android机和没有越狱的iPhone无法修改host,因此没办法测试.为了让我这个磨人的PD也能看到,开发推荐了Fiddler ...

  10. windows 系统安装 IIS 以及配置 web

    Win7系统或win8自带了IIS和framework,不需要单独去下载,只需要开启后就可以运行asp.net程序 由于时间关系,先分享两个关于这个的链接: win7安装iis及web配置教程 htt ...