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. [剑指Offer]5.二维数组中的查找

    题目 在一个二维数组中,每一行都依照从左到右递增的顺序排序,每一列都依照从上到下递增的顺序排序.请完毕一个函数,输入这种一个二维数组和一个整数.推断数组中是否含有该整数. 思路 [算法系列之三十三]杨 ...

  2. ql.io来自ebay的api快速集成的构建api的框架

    说的有点绕口,实际上是为了减轻在Web上请求数据的复杂度,eBay推出了自己的Web查询语言——ql.io,ql.io将多个独立的API请求绑定成一个单独的请求. ---待续

  3. Atitit 错误处理机制：（1）静默模式（2）警告模式 （3）异常模式

    Atitit 错误处理机制:(1)静默模式(2)警告模式 (3)异常模式       三.     PDO的错误处理机制: (1)静默模式 默认情况下与mysql处理方式一致,不现实错误信息(静默模式 ...

  4. Cublas矩阵加速运算

    前言 编写 CUDA 程序真心不是个简单的事儿,调试也不方便,很费时.那么有没有一些现成的 CUDA 库来调用呢? 答案是有的,如 CUBLAS 就是 CUDA 专门用来解决线性代数运算的库. 本文将 ...

  5. java中的数据加密1 消息摘要

    消息摘要(Message Digest) 又称为数字摘要(Digital Digest).它是一个唯一对应一个消息或文本的固定长度的值,它由一个单向Hash加密函数对消息进行作用而产生.如果消息在途中 ...

  6. Java知多少（26）源文件的声明规则

    当在一个源文件中定义多个类,并且还有import语句和package语句时,要特别注意这些规则: 一个源文件中只能有一个public类. 一个源文件可以有多个非public类. 源文件的名称应该和pu ...

  7. modelsim 中如何加载多个对比波形文件

    首先选中波形,然后点击file----datasets. 选中sim文件,然后点击save as. 对所保存的文件命名.完成之后点击done即可. 在完成上述的加载波形之后,会有多个.wlf文件,如上 ...

  8. 教程：Spagobi开源BI系统 Console报表设计教程

    Console Designer 1 Console Designer Console Designer 1.1 Introduction 1.2 Dataset Tab 1.3 Summary Pa ...

  9. php MP3文件下载功能的实现

    方式一:生成文件,返回一个链接,window.href = 链接: 方式二:hearder输出文件流. 先设置流的Content-Type和web服务器的mime类型. mime类型参考 一个head ...

  10. ASP.NET MVC与ASP.NET Web Form简单区别

    概论: Asp.net  微软 提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form 优点: 1.支持丰富的服务器控件.如:Gr ...