在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. JVM-调优命令

    jps JVM Process Status Tool,显示指定系统内所有的HotSpot虚拟机进程. 命令格式:   jps [options] [hostid] option参数: -l : 输出 ...

  2. web测试总结—用户体验

    一.什么是用户体验 用户体验,英文叫做user experience,缩写为UE,或者UX.一个较常见的定义是“指用户访问一个网站或者使用一个产品时的全部体验.他们的印象和感觉,是否成功,是否享受,是 ...

  3. Spark编程环境搭建（基于Intellij IDEA的Ultimate版本）（包含Java和Scala版的WordCount）（博主强烈推荐)

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  4. antlr4 接触

    1. 配置IDE(可选) 2. 加减法示例 编写expr.g4 grammar AddMinus; expr: Minus Number #minusNum | expr op=('+'|'-') e ...

  5. Java代码实现单例模式

    public class Single { /*private static final Single single=new Single(); private Single(){} public s ...

  6. Ruby on Rails中的Rake教程(Rake如何把我灌醉!)

    下面是我们使用Rake任务的例子: 1.给列表中的用户发送邮件 2.每晚数据的计算和报告 3.过期或重新生成缓存 4.备份数据和svn版本(how's this : subversion reposi ...

  7. static & abstract

    不能放在一起的修饰符:final和abstract,private和abstract,static和abstract,因为abstract修饰的方法是必须在其子类中 实现(覆盖),才能以多态方式调用, ...

  8. 移动端H5适配方法（盒子+图片+文字）

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  9. pictureBox控件获得图片路径的三种方法及自适应大小属性

    1.绝对路径: this.pictureBox2.Image=Image.FromFile("D:\\001.jpg"); 2.相对路径: Application.StartupP ...

  10. 关于Mysql+EF6本地运行和发布没有问题，发布到服务器上出现问题的解决方案

    这个问题折磨了我差不多两天,网上各种方法也找了个遍,但是都没有解决我的问题,后面通过自己仔细分析问题和排查,终于把问题解决了,以下是我的解决问题的步骤,希望能帮到各位,不要再被这些问题坑了 1,项目实 ...