css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果  2.多个div并排显示 3.清除浮动（默认显示）

一.文字环绕效果：

html代码如下：

 <body>

      <style type="text/css">

        #big img {float: left;padding: 10px;border: 1px solid red;}

        #big span {font-size: 24px;font-weight: bold; margin: 0 auto;}

      </style>

      <div id="big">

         <span>广告浮动效果:</span>

          <p><img src="..\Desktop\p6.jpg" width="200" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>

      </div>

   </body>

解释：把img标签 直接左浮动，就会出现文字包围图片的效果，而padding: 10px;的作用是设置图片与文字的距离，运行效果如下（记得自己修改图片路径）：

二.多个div并排显示

html代码如下：

 <body>

      <style type="text/css">

         #big div {width: 100px;height: 100px;}

         .div1 {background: red;}

         .div2 {background: yellow;}

         .div3 {background: green;}

      </style>

      <div id="big">

         <div class="div1">div1</div>

         <div class="div2">div2</div>

         <div class="div3">div3</div>

      </div>

   </body>

上面的代码显示效果如下：

由图看出三个div并没有并排显示，而是竖着显示的，这就是默认的显示方法。而如果想要并排显示的话，只需要在上上面的代码中加一句话，

#big div {width: 100px;height: 100px;float：left;}然后显示效果如下：

三.清除浮动

有下面的这段html代码：

  <body>

      <style type="text/css">

         #big div {width: 100px;height: 100px;}

         .div1 {background: red;float: left;}//注意这里的第一个div是左浮动；

         .div2 {background: yellow;}

         .div3 {background: green;}

      </style>

      <div id="big">

         <div class="div1">div1</div>

         <div class="div2">div2</div>

         <div class="div3">div3</div>

      </div>

   </body>

从第二个例子可以得知，如果div2和div3都设置了float：left；三个div就会并排显示。注意上面的代码，第一个div是左浮动，而后面两个却没有设置浮动，运行效果怎么样呢？如下图：

由图可以看出，div2不见了，这是为什么呢？因为div1设置为左浮动，所以div2会默认为从第一个显示，所以div1就覆盖了div2，div3从div2处继续显示，所以造成了这样一个结果，那么该怎么去还原默认显示呢？这就要用到清除浮动，修改代码  .div2 {background: yellow;clear：left;}就ok了。效果如下：

div2又出现了，这就是清除浮动的作用，clear属性有三种值：left、right、both；顾名思义，就知道什么意思了，我不多说了。

三个例子就到这儿吧，希望对大家有帮助。有问题欢迎讨论。

css通用小笔记02——浮动、清除（三个例子）的更多相关文章

  1. css通用小笔记01——导航背景

    很多刚接触前端的可能遇到一些css能解决的小问题,我现在总结了一些,将会逐渐和大家分享,先是导航的背景问题,在网页中常常看到,当鼠标放到一个导航按钮上面是,就会出现一些特效,比如背景,这是最常用的,我 ...

  2. css通用小笔记03——浏览器窗口变小 div错位的问题

    我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...

  3. HTML+CSS基础小笔记再整理

    1. font的两个必须要写的:font-size 和 font-family text-indent 首行缩进(em)1em=一个文字大小 text-algin 对齐方式:left.center.r ...

  4. Css技术入门笔记02

    第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674 4.其他选择器 4.1.关联选择器 有时在页面上会出现我们 ...

  5. html+css常用小笔记（持续更新）

    1 去掉input点击时的蓝色边框 outline:none; 2 禁止文本选中 -webkit-touch-callout: none; /* iOS Safari */ -webkit-user- ...

  6. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  7. CSS技巧（一）：清除浮动

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  8. css随堂笔记（三）

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  9. HTML&CSS精选笔记_浮动与定位

    浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程. 如何定义浮动? 在CSS中,通过float属 ...

随机推荐

  1. 通过js获得选择文件的绝对路径

    <form name="thisform" method="get" action="test.jsp" id="thisf ...

  2. 邻接表有向图(三)之 Java详解

    前面分别介绍了邻接表有向图的C和C++实现,本文通过Java实现邻接表有向图. 目录 1. 邻接表有向图的介绍 2. 邻接表有向图的代码说明 3. 邻接表有向图的完整源码 转载请注明出处:http:/ ...

  3. Linux的学习--配置LNMP环境

    最近,回到公司,发现电脑都换成linux系统了...很无力... 配置环境,跑起项目来就花了一天...额...在这里记录一下-- 系统是ubuntu 12.04. 一.安装nginx1:ubuntu因 ...

  4. Anliven - 你的学习为何如此低效？！

    拖延 适时学习的本质就是营造机会,具有强烈的时效性,而拖延能够毁灭所有机会! 一个得不到执行的完美计划,比不上一次仓促的执行! 盲目 缺少有效的策略和方法,没有弄清基本的问题(需求--->性质- ...

  5. Insert Plain Text and Images into RichTextBox at Runtime

    Insert Plain Text and Images into RichTextBox at Runtime' https://www.codeproject.com/Articles/4544/ ...

  6. C#基础整理参数

    基本概念 把数据传入方法中,可以使方法有多个返回值. 参数的传递 值参数,通过将实参的值复制到形参的方式传递数据.值参数的实参可以是变量或者是表达式

  7. var 的使用

    List<Enterprise> epList = ViewBag.epList; foreach (var item in epList){ //todo ... } 当 List< ...

  8. LINQ多个操作嵌套实现

    获取集合,需要使用多个条件Where,排序OrderBy,查询Select一起. 先来分步实现: source code: string[] stringArray = { "hgdgh&q ...

  9. LINQ的Contains方法

    此方法,判断集合中是否包含有某一元素. source code: Enumerable.Where(stringArray, n => n.Contains("t"));

  10. C#的变迁史 - C# 1.0篇

    C#与.NET平台诞生已有10数年了,在每次重大的版本升级中,微软都为这门年轻的语言添加了许多实用的特性,下面我们就来看看每个版本都有些什么.老实说,分清这些并没什么太大的实际意义,但是很多老资格的. ...