在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. SocketIo+SpringMvc实现文件的上传下载

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

  2. VS2015 未能正确加载 JavascriptWebExtensionsPackage

    解决方法: Close Visual Studio Open the %UserProfile%\AppData\Local\Microsoft\VisualStudio\<version> ...

  3. ASP.NET5使用FaceBook登录

    原版教程 使用VS2015创建Web应用: 此教程使用的是FaceBook账号登录,需要添加相关的类,打开Nuget: 搜索Microsoft.AspNet.Authentication.Facebo ...

  4. 【链表】Linked List Cycle

    题目: Given a linked list, determine if it has a cycle in it. 思路: 对于判断链表是否有环,方法很简单,用两个指针,一开始都指向头结点,一个是 ...

  5. 【原】Ubuntu ATI/Intel双显卡 驱动安装

    本文只针对含有AMD双显卡的部分机型,已经测试过的包括DELL Vostro 3550/DELL Inspiron 14R (AMD 6630 和 Intel HD 3000).整个安装过程需要使用命 ...

  6. OpenDaylight虚拟租户网络(VTN)详解及开发环境搭建

    一.VTN简介及架构分析:   具体详见开发人员指南wiki:https://wiki.opendaylight.org/view/Release/Lithium/VTN/developer_Guid ...

  7. sql语句中出现笛卡尔乘积 SQL查询入门篇

    2014-12-29  凡尘工作室   阅 34985  转 95 本篇文章中,主要说明SQL中的各种连接以及使用范围,以及更进一步的解释关系代数法和关系演算法对在同一条查询的不同思路. 多表连接简介 ...

  8. 简单的node爬虫练手，循环中的异步转同步

    简单的node爬虫练手,循环中的异步转同步 转载:https://blog.csdn.net/qq_24504525/article/details/77856989 看到网上一些基于node做的爬虫 ...

  9. winform 导出datagridview 到excel

    数据不多可以用下面的方式方法,如果数据较大,不建议这样使用,可能会比较卡如果电脑上没有Microsoft.Office.Interop.Excel.dll去找DLL下载站下载即可 需要先导入这个dll ...

  10. javascript中字符串常用操作总结

    String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不 ...