一， 效果图。

二，代码。

<!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. OJ002

    register:这个关键字请求编译器尽可能的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率.注意是尽可能,不是绝对. 因为,如果定义了很多register变量,可能会超过CPU的寄 ...

  2. Oracle：WITH AS () Merge ?

    WITH AS 语法在SQL SERVER 和ORACLE数据库上均支持,主要用于子查询.语法如下: WITH expression_name [ ( column_name [,...n] ) ] ...

  3. InputStream和Reader，FileInputStream和 FileReader的区别

    一.InputStream和Reader的区别 InputStream和Reader都可以用来读数据(从文件中读取数据或从Socket中读取数据),最主要的区别如下: InputStream用来读取二 ...

  4. Python爬虫7-Cookie & Session

    GitHub代码练习地址:1.手动利用cookie访问网页:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac10_cook ...

  5. [Swift]LeetCode551. 学生出勤纪录 I | Student Attendance Record I

    You are given a string representing an attendance record for a student. The record only contains the ...

  6. [Swift]LeetCode812. 最大三角形面积 | Largest Triangle Area

    You have a list of points in the plane. Return the area of the largest triangle that can be formed b ...

  7. 关于scrollTop获取卷曲距离的三种方式- --兼容代码如下

    对于不同浏览器而言--获取卷曲距离方式可能有所不一样---下面提供三种方式--- scrollTop1 = window.pageYoffset || document.documentElement ...

  8. visualsvn的迁移及svn的一些问题

    从A服务器将visualsvn的内容迁移到B服务器的visualsvn. 1 在B服务器上安装visualsvn 到visualsvn官网https://www.visualsvn.com/下载vis ...

  9. springcloud之服务注册与发现

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

  10. Asp.Net Core与携程阿波罗(Apollo)的第一次亲密接触

    一.瞎扯点什么 1.1 阿波罗 ​ 阿波罗是希腊神话中的光明之神.文艺之神,同时也是罗马神话中的太阳神:他是光明之神,从不说谎,光明磊落,在其身上找不到黑暗,也被称作真理之神.他非常聪明,通晓世事,是 ...