一， 效果图。

二，代码。

<!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. 微信小程序学习笔记（三）

    一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息 注意: 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致 ...

  2. Oracle分析函数——函数列表

    --------------聚合函数 SUM :该函数计算组中表达式的累积和 MIN :在一个组中的数据窗口中查找表达式的最小值 MAX :在一个组中的数据窗口中查找表达式的最大值 AVG :用于计算 ...

  3. JS日历插件 - My97 DatePicker用法详解

    一.简介 1. 注意事项 (1)My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名: (2)各目录及文件的用途: WdatePicker.js 配 ...

  4. 【安富莱二代示波器教程】第16章 附件A---电阻屏触摸校准

    第16章      附件A---电阻屏触摸校准 二代示波器的触摸校准比较简单,随时随地都可以做触摸校准,按下K1按键即可校准.有时候我们做触摸校准界面,需要在特定的界面才可以进入触摸校准状态,非常繁琐 ...

  5. PHP_DOC php文档结构及注解浏览

    项目中的PHP文件比较多,为了方便查看,使用PHP写了个小工具,可查看PHP文件的所有类.函数 和特定注释. 显示PHP文件的 Class 和 Function 显示 /// 开头的注解 显示 /// ...

  6. java前后分离使用fetch上传文件失败500

    这次不是写什么技术要点,仅仅是记录一下 最近遇到的一个问题 背景 使用fetch向java后台上传文件时,前端调试报错500,后端的报错为multipart 无法解析,翻译过来大概是这个意思. 由于本 ...

  7. [Swift]LeetCode151. 翻转字符串里的单词 | Reverse Words in a String

    Given an input string, reverse the string word by word. Example: Input: "the sky is blue", ...

  8. [Swift]LeetCode677. 键值映射 | Map Sum Pairs

    Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...

  9. 花点时间顺顺Git（下）

    ### 进入正文前插个楼,因为vim的操作下面会频繁用到 vim的操作 1.输入i进入插入模式,对上一条commit信息的内容进行修改 2.按下ESC键,退出编辑模式,切换到命令模式. 3.保存修改并 ...

  10. python编译pyc工程--导包问题解决

    利用python 编译工程,生产pyc文件 pyc文件好处:是一种二进制机器码,并且隐藏了源文件代码,但是有和py文件一样的功能(可以理解为效果一样) 所以可以将代码隐藏,便于商业价值,保护代码隐私还 ...