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. Spark 论文篇-Spark：工作组上的集群计算的框架（中英双语）

    论文内容: 待整理 参考文献: Spark: Cluster Computing with Working Sets. Matei Zaharia, Mosharaf Chowdhury, Micha ...

  2. c 链表之 快慢指针 查找循环节点

    参考:http://blog.csdn.net/wenqian1991/article/details/17452715 上面分析了 根据这张图 推倒出 数学公式. 刚接触 不能一下弄明白.下面结合上 ...

  3. 使用google guava做内存缓存

    google guava中有cache包,此包提供内存缓存功能.内存缓存需要考虑很多问题,包括并发问题,缓存失效机制,内存不够用时缓存释放,缓存的命中率,缓存的移除等等. 当然这些东西guava都考虑 ...

  4. linux每日命令(39)：lsof命令

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协议 ...

  5. Git关于pull,commit,push的总结

    以前总是由于自己的自身的原因,对于每一次的git的操作,我都是通过eclipse或者是idea来进行的,但是 我每一次都不是很清楚的关于这些方面的操作,现在我们来进行关于git bash的操作,正是由 ...

  6. ios UIButton设置高亮状态下的背景色

    一,通过按钮的事件来设置背景色 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 - (void)viewDidLoad {     [ ...

  7. Java注解小记

    java注解是jdk1.5以后新出的特性,注解提升了Java语言的表达能力,有效地实现了应用功能和底层功能的分离,框架/库的程序员可以专注于底层实现. 1.Java内置注解 主要有三个: @Overr ...

  8. Fedora 21 安装 Budgie Desktop

    最新文章:Virson's Blog Budgie Desktop 是一款自由开源桌面,是 Evolve OS 的默认桌面,Evolve OS 是一款 OpenSUSE 的衍生系统.Budgie De ...

  9. 【转】WPF自定义控件与样式(2)-自定义按钮FButton

    一．前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 还是先看看效果图吧:   定义Button按钮名称叫FButton,主要是集成了 ...

  10. 嵌入式开发之hi3519---i2c MDIO PHY uboot phy调试总结

    首先调试检查硬件,再调试软件 首先仔细阅读phy和主芯片datesheet ,尤其着重阅读mii寄存器,它是mac和phy交换信息的媒介. 硬件注意:关于phy的芯片需要注意的有几点:1.mdio接口 ...