一， 效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS 浮动</title>

    <style>

    img {

        float: right;

    }

    .thumbnail {

        float: left;

        width: 110px;

        height: 90px;

        margin: 5px;

    }

    .text_line {

        clear: both;

        margin-bottom: 2px;

    }

    </style>

</head>

<body>

    <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>

    <p>

        <img src="logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

    </p>

    <h3>Image Gallery</h3>

    <p>Try resizing the window to see what happens when the images does not have enough room.</p>

    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

    <h3>Image Gallery</h3>

    <p>Try resizing the window to see what happens when the images does not have enough room.</p>

    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

    <h3 class="text_line">Second row</h3>

    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS Float(浮动)的更多相关文章

  1. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  2. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  3. CSS之float浮动

    CSS理解之float浮动 首先我们看看W3C给出的关于 float 的说明: 参考资料   MDN   W3C

  4. css基础-float浮动

    float实现文字环绕图片效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. 前端css之float浮动

    浮动的准则,先找前一个块标签,在确认有否清除浮动的条件或者是距离的情况下,如果这一行能摆得下,就继续紧贴前一个标签 如果摆不下,就会另起一行 浮动只有左边和右边 如果是块标签,设置浮动,先把displ ...

  6. html/css中float浮动的用法

    一.float基础用法示例 1.我们先建两个div盒子,设置高度.宽度和背景颜色: 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就 ...

  7. 【Web】CSS中的浮动float

    CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...

  8. float浮动布局（慕课网CSS笔记 + css核心技术详解第四章）

    ---------------------------------------------------------------------- CSS中的position: CSS三种布局方式: 标准流 ...

  9. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  10. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

随机推荐

  1. Shell语言

    1.shell脚本规范以.sh结尾 2.运行 3.赋予权限,查询shell的执行过程 输出时间的 输出日历 输出一年的日历 修改语言 计算机 read –t 3 –p “1111111111”   # ...

  2. dc的博客翻修计划启动

    紫书大部分学习完毕,等待一轮补完计划: 白书正在攻略中,进度百分之30: 博客翻修计划启动,我会在本学期内逐渐写系统性的学习笔记,我学习时遇到的困难的地方会有说明: 每个部分一定会放上经过验证的实现: ...

  3. React-Native的基本控件属性方法，对React-Native的学习，从熟悉基本控件开始。

    对React-Native的学习,从熟悉基本控件开始. View 属性方法 序号 名称 属性Or方法 类型 说明 1 accessibilityLabel 属性 string   2 accessib ...

  4. Node.js(day4)

    一.一些小问题 1.文件操作路径和模块读取路径的问题 我们使用fs核心模块系统进行文件操作时一般这样书写路径 fs.readFile('./views/index.html');//读取views目录 ...

  5. [Swift]LeetCode299. 猜数字游戏 | Bulls and Cows

    You are playing the following Bulls and Cows game with your friend: You write down a number and ask ...

  6. 剖析项目多个logback配置(下)

    来源:http://www.cnblogs.com/guozp/p/5973038.html 上篇大概描述了logback的加载顺序以及加载的源码,本篇将分析如果在你的Maven或者其他多模块的项目中 ...

  7. springcloud之服务注册与发现

    本次分享的是关于springcloud服务注册与发现的内容,将通过分别搭建服务中心,服务注册,服务发现来说明:现在北京这边很多创业公司都开始往springcloud靠了,可能是由于文档和组件比较丰富的 ...

  8. SpringBoot启动如何加载application.yml配置文件

    一.前言 在spring时代配置文件的加载都是通过web.xml配置加载的(Servlet3.0之前),可能配置方式有所不同,但是大多数都是通过指定路径的文件名的形式去告诉spring该加载哪个文件: ...

  9. 高可用Eureka注册中心配置说明(双机部署)

    目  录 1. 高可用EureKa注册中心示意图 2. Eureka实例相互注册配置 3. 微服务注册到Eureka配置 4. 启动步骤及配置成功检查 5. 说明事项 1. 高可用EureKa注册中心 ...

  10. 带着新人学springboot的应用11（springboot+Dubbo+Zookeeper 上）

    这次说个在大型项目比较常见的东西,就是分布式,分布式到底是个什么东西呢?概念太大,不好说,就像刚学javaee的人问你,什么是web啊,什么是spring啊等等,你可能觉得,这个东西我好像知道,但是用 ...