CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：

/*示例*/

<style>

    img

    {

        float:left;

    }

</style>

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

<style>

    .thumbnail

    {

        float:left;

        width:110px;

        height:90px;

        margin:5px;   /*外边距*/

    }

</style>

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

/*固定搭配*/

<style>

    .clearfix {

                *zoom: 1

            }

            .clearfix:before,.clearfix:after {

                content: " ";

                display: block;

                clear: both;

            }

</style>

以上学习笔记整理自菜鸟教程，下面为我的练习code demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>浮动</title>

    <style>

        div{

            border:1px solid #999;  /* 边框粗细 线条 颜色 */

        }

        #box div{

            width:200px;

            height: 200px;

            background-color: blue;

            color:#fff;

            text-align: center;

            line-height: 200px;

            margin:10px;

            /* 浮动 */

            float:left;  /* left right */

        }

        #box2{

            width:220px;

            height: 220px;

            background-color: red;

            color:#fff;

            text-align: center;

            line-height: 200px;

            margin:10px;

            /*浮动*/

            float:right;

        }

        /* 如何清除浮动 */

        .clearfix {

            *zoom: 1

        }

        .clearfix:before,.clearfix:after {

            content: " ";

            display: block;

            clear: both;

        }

    </style>

</head>

<body>

    <div id="box" class="clearfix">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

    </div>

</body>

</html>

效果

CSS：Float的更多相关文章

  1. 轻轻松松学CSS：float

    float属性,会使元素向左或向右移动,其周围的元素也会重新排列.float不仅自己飘忽不定,还对周围元素有影响,这种影响力不容小觑.他捉摸不定(浮动规律不好把握),他干涉他国内政(对周围元素有影响) ...

  2. CSS：float: right 靠右换行的解决方法

    1.float: right的使用用法:使用html代码<span style="float: right">*****</SPAN>,其中*****就是你 ...

  3. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  4. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  5. css：关于position和float

    在CSS中,我们是通过定位属性position来进行定位的,具体它有如下几个属性值.常见的属性有如下几个: absolute  生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.元 ...

  6. 验分享：CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  7. CSS：CSS Float(浮动)

    ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...

  8. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  9. CSS：CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

随机推荐

  1. [ci]jenkins-slave的添加(vm模式,通过ssh和jnlp)

    jenkins-slave的添加-在vm上通过jnlp方式 参考:http://www.cnblogs.com/sparkdev/p/7102622.html 下载 slave.jar和slave-a ...

  2. Vert.x 示例

    //filename: MainVerticle.java package io.vertx.guides.wiki; import io.vertx.core.AbstractVerticle; i ...

  3. MySql事务select for update及数据的一致性处理讲解

    MySQL中的事务,默认是自动提交的,即autocommit = 1: 但是这样的话,在某些情形中就会出现问题:比如: 如果你想一次性插入了1000条数据,mysql会commit1000次的, 如果 ...

  4. segMatch:基于3D点云分割的回环检测

    该论文的地址是:https://arxiv.org/pdf/1609.07720.pdf segmatch是一个提供车辆的回环检测的技术,使用提取和匹配分割的三维激光点云技术.分割的例子可以在下面的图 ...

  5. maven 如何引入本地jar包

    比如我下载了 一.怎么添加jar到本地仓库呢?步骤:1.cmd命令进入该jar包所在路径2.执行命令:mvn install:install-file -Dfile=lucene-queryparse ...

  6. Java如何创建多线程服务器？

    在Java编程中,如何创建多线程服务器? 以下示例演示如何使用ServerSocket类的MultiThreadServer(socketname)方法和Socket类的ssock.accept()方 ...

  7. Unity3D中Layers和LayerMask解析

    Unity中是用int32来表示32个Layer层.int32表示二进制一共有32位(0—31).在Unity中可编辑的Layer如下图所示:   在Unity中每个GameObject都有Layer ...

  8. Python 函数（参数组合）

    在Python中定义函数,可以用必选参数.默认参数.可变参数和关键字参数,这4种参数都可以一起使用,或者只用其中某些,但是请注意,参数定义的顺序必须是:必选参数.默认参数.可变参数和关键字参数 定义一 ...

  9. IOC容器特性注入第四篇：容器初始化

    IOC容器,就是把各种服务都注入到容器里,想要什么就去拿什么,不仅解决服务类和接口类的耦合度还可以提高性能方便管理. 这里封装一个接口类和一个实现类 1.IContainerManager接口 pub ...

  10. [UI] 02 - Layout & CSS3

    开胃小菜 一.纯CSS布局 UI效果 From: 创建一个没有表格的网页 代码详情 <!DOCTYPE html> <html> <head> <meta c ...