一， 效果图。

二，代码。

<!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. 用Vue2仿京东省市区三级联动效果

    三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...

  2. [Swift]LeetCode125. 验证回文串 | Valid Palindrome

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  3. [Swift]LeetCode739. 每日温度 | Daily Temperatures

    Given a list of daily temperatures T, return a list such that, for each day in the input, tells you ...

  4. [Swift]LeetCode1014. 最佳观光组合 | Best Sightseeing Pair

    Given an array A of positive integers, A[i] represents the value of the i-th sightseeing spot, and t ...

  5. 必须知道的Java八大排序算法

    冒泡排序.简单选择.直接插入.快速排序.堆排序.希尔排序.归并排序.基数排序. 将其按排序方式分类如下图所示: 1.冒泡排序: 基本思想——在要排序的一组数中,对当前还未排好序的范围内的全部数据,自上 ...

  6. PHP实现登录注册

    一.首先实现一个PHP的简单登录注册的话 我们要简单的与后端定义一下接口和传输数据的方式 并且我们要有一个phpStudy服务器. 第一步:当我们点击注册按钮的时候数据库要接收到客户端请求的数据  第 ...

  7. VMware虚拟机安装Linux系统

    许多新手连 Windows 的安装都不太熟悉,更别提 Linux 的安装了:即使安装成功了,也有可能破坏现有的 Windows 系统,比如导致硬盘数据丢失.Windows 无法开机等.所以一直以来,安 ...

  8. 一个std::sort 自定义比较排序函数 crash的分析过程

    两年未写总结博客,今天先来练练手,总结最近遇到的一个crash case. 注意:以下的分析都基于GCC4.4.6 一.解决crash 我们有一个复杂的排序,涉及到很多个因子,使用自定义排序函数的st ...

  9. Cassandra事务与关系型数据库事务有何区别

    Cassandra不会使用回滚和锁机制来实现关系型数据的ACID事务,相比较于提供原子性,隔离性和持久化,Cassandra提供最终(可调节的)一致性,让用户决定为每个事务提供强一致性或者最终一致性. ...

  10. [MV] - You Give REST a Bad Name

    本首歌改自Bon Jovi经典歌曲"You Give Love a Bad Name". 改编的作者是Dylan Beattie, 他是Spotlight的系统架构师. 改编后的歌 ...