在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. 模拟登陆+数据爬取 (python+selenuim)

    以下代码是用来爬取LinkedIn网站一些学者的经历的,仅供参考,注意:不要一次性大量爬取会被封号,不要问我为什么知道 #-*- coding:utf-8 -*- from selenium impo ...

  2. JDK1.10+scala环境的搭建之linux环境（centos6.9）

    ---恢复内容开始--- 第一步:安装jdk1.10版本 进入网页 http://oracle.com/technetwork/java/javase/downloads/index.html  下载 ...

  3. MySQL的Sleep进程占用大量连接解决方法

    第一部分为产生大量sleep进程的原理及对应解决方法第二部分为设置wait_timeout值,有效减少sleep进程 ========================================= ...

  4. jquery插件开发三种方法

    1.好像之前看视频记录下来的,不记得了. //类级别插件开发,主要是在jQuery中定义全局方法: //第一种写法 jQuery.myFunc = function(str){ alert(" ...

  5. elasticsearch插件的开发--计算特征向量的相似度

    目录 更改elasticsearch的score评分 插件源码解读 脚步一 脚本二(fast-vector-distance) 部署 测试 创建索引 查询 版本说明 项目详细见github 参考文献 ...

  6. [原] Bash Script 显示其自身位置

    SOURCE="${BASH_SOURCE[0]}" BIN_DIR="$( dirname "$SOURCE" )" while [ -h ...

  7. angularjs 依赖注入原理与实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了“削减计算机程序的耦合问题” ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是 ...

  8. win7下使用IIS服务器及自定义服务器端包含模块（SSI）步骤

    配置完过段时间就容易忘记,特此记录. 1.开启IIS服务器. 默认没有安装,需要先安装. 打开控制面板–> 打开“程序和功能”–> 左侧选择“启用或关闭windows功能”–> 找到 ...

  9. ARC基本原理

    基本简介 ARC是Automatic Reference Counting(自动引用计数器)的简称. ARC是ios5.0引入的新特性,完全消除手动管理内存的繁琐,编译器会自动在适合的代码里面插入适当 ...

  10. TCP三次握手是什么？为什么要进行三次握手？两次，四次握手可以吗？

    1.第一次握手,发送SYN报文,传达信息:“你好,我想建立连接”: 第二次握手,回传SYN+ACK报文,传达信息:“好的,可以建立链接”:    第三次握手,回传ACK报文,传到信息:“好的,我知道了 ...