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. 100个MySQL 的调节和优化的提示

    100个MySQL 的调节和优化的提示 MySQL是一个功能强大的开源数据库.随着越来越多的数据库驱动的应用程序,人们一直在推动MySQL发展到它的极限.这里是101条调节和优化MySQL安装的技巧. ...

  2. 将R非时间序列的data.frame转变为时序格式

    将R非时间序列的data.frame转变为时序格式,常常会用到,尤其是股票数据处理中, 举例:dailyData包括两列数据:Date Close10/11/2013 871.9910/10/2013 ...

  3. Winform开发框架之通用附件管理模块 --SNF快速开发平台3.3-Spring.Net.Framework

    最近项目太多都没有时间写文章了,实际项目需求一,CS端和windows平板都需要附件上传管理功能.以前做的都是BS的附件管理和上传功能.本来计划在Winform上嵌套一个浏览器直接用bs的附件上传功能 ...

  4. Spring Boot系列——Spring Boot如何启动

    Spring Boot启动过程 ​上篇<Spring Boot系列--5分钟构建一个应用>介绍了如何快速创建一个Spring Boot项目并运行.虽然步骤少流程简单,为开发者省去了很多重复 ...

  5. TitleBar 的那些设置

    设置状态栏透明: View decorView = activity.getWindow().getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYO ...

  6. TCP/IP协议理解

    TCP/IP协议理解 一.    协议分层 由于ISO标准中的网络模型是个7层模型,但是由于7层模型对于当时的网络厂商来说太过复杂,很多厂家采用了简化的4层模型来实现网络设备,4层模型也就成了事实的网 ...

  7. golang：mime.Decode、mime.DecodeHeader

    最近在做邮件解析的相关工作,在使用mime.Decode/mime.DecodeHeader时有些疑问. 有些搞不懂mime.Encode和mime.EncodeHeader的区别.

  8. js判断登陆用户名及密码是否为空的简单实例

    js判断登陆用户名及密码是否为空的简单实例 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript ...

  9. JVM：从实际案例聊聊Java应用的GC优化

    原文转载自美团从实际案例聊聊Java应用的GC优化,感谢原作者的贡献 当Java程序性能达不到既定目标,且其他优化手段都已经穷尽时,通常需要调整垃圾回收器来进一步提高性能,称为GC优化.但GC算法复杂 ...

  10. Android studio 怎么使用单元测试（不需要device）

    关于单元测试的使用,写代码过程中有时候需要检测下代码逻辑的可行性与正确性,又不想通过设备运行,那么就可以通过单元测试跑下代码~ 1.首先建立一个Android studio的Android项目: 2. ...