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. Go 程序的性能调试问题

    英文原文:Debugging performance issues in Go programs 假设你手上有个Go语言编写的程序,你打算提升它的性能.目前有一些工具可以为此提供帮助.这些工具能帮你发 ...

  2. IT? 挨踢

    中国的IT,是最憋屈的IT. 他们掌握着正常人看不懂的英文+字母+标点符号组成的各类代码语言 他们像作者一样从无到有,从空白的白纸上敲出上千上万条华丽的计算机语言 但是他们承受着正常人的鄙视: 我的需 ...

  3. Spark 底层网络模块

    文章正文 对于分布式系统来说,网络是最基本的一环,其设计的好坏直接影响到整个分布式系统的稳定性及可用性.为此,Spark专门独立出基础网络模块spark-network,为上层RPC.Shuffle数 ...

  4. Atitit 快速开发体系建设路线图

    Atitit 快速开发体系建设路线图 1.1. 项目类型划分 哑铃型 橄榄型  直板型(可以立即实行)1 1.2. 解决方案知识库 最佳实践库 最佳流程优化(已成,需要一些整理)2 1.3. 功能模板 ...

  5. [k8s]jenkins部署在k8s集群

    $ cat jenkins-pvc.yaml kind: PersistentVolumeClaim apiVersion: v1 metadata: name: jenkins-pvc spec: ...

  6. 基于mindwave脑电波进行疲劳检测算法的设计(1)

    一.简介 脑波,又称之为脑电波,是人大脑发出的电波,非常的微弱,只能通过设备来检测.人的脑波在不同状态下,会不同,因此可以通过脑波来量化分析人的精神状态. 科学家讲脑电波分为四种,以下为详细解释 (1 ...

  7. [20170706]SQL Server事务复制订阅端，job不小心被删，修复

    右击还存在的订阅,生成脚本,有个过程sp_addpullsubscription_agent 执行,发现报错说distribution agent 已经存在 执行: UPDATE dbo.MSrepl ...

  8. 【GMT43智能液晶模块】例程九：RTC实验——时钟显示

    实验原理: STM32的实时时钟(RTC)是一个独立的定时器,有一组连续计数的 计数器,通过软件来对其进行相关的配置,可以提供时钟功能,通过修改计 数器的的值,可以调整时钟.最终通过emWin在显示屏 ...

  9. ZigBee基础

    Zigbee技术 Zigbee由Zigbee联盟制定的无线网络协议,在IEEE 802.15.4标准的基础上设计,是一种自愈.安全和稳健的网状网协议,可扩展到更大范围内的数百个节点.主要用于距离短.功 ...

  10. .NET DLL 加密工具

    最近发现了一个软件叫 DotfuscatorPro 混淆加密工具 设置方式如下 1. Settings->Global Options Disable String Encryption 设为  ...