CSS浮动(float,clear)通俗讲解

CSS 浮动

CSS float浮动的深入研究、详解及拓展(一)

CSS float浮动的深入研究、详解及拓展(二)

http://www.w3cplus.com/css/clear-float

1.浮动实现图文环绕（理解难点）

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框,因此，创建浮动框可以使文本围绕图像

文本围绕图片源代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>浮动之文本围绕图片</title>
  6.          <style>
  7.              .box img {
  8.                  width: 80px;
  9.                  border: 1px dashed #f50447;
  10.                  float: left;
  11.              }
  12.              .box p {
  13.                  background-color: #00BFFF;
  14.              }
  15.          </style>
  16.      </head>
  17.      <body>
  18.          <div class="box">
  19.              <img src="img/photo.jpg"/>
  20.              <p>在今天，有不懂的知识，我们都会上网搜一下，但这只是最简单的搜索方法，属于搜索的初级阶段。那搜索的高级阶段是什么呢？最近，科学作家万维钢在新书《智识分子》里介绍了一个概念，叫“信息极客”，他们不仅在网上查找信息，而且还想为社会创造价值，甚至想用信息左右公共政策。想要成为这样的人，你就要会三个高级功夫。
  21.              第一个功夫，是阅读学术论文。<br/>
  22.              第二个功夫，是直接阅读原始数据。<br/>
  23.              第三个功夫，是主动采集和分析数据。那些大数据咱们采集不了，可以从自己的数据开始，也就是量化自我。<br>
  24.              </p>
  25.          </div>
  26.      </body>
  27.  </html>

2.清除浮动造成影响源代码（浮动是带有方向的inline-block行内联块级元素/包裹性/破坏性）

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>深入学习浮动浮动清除</title>
  6.          <style>
  7.              body, img, ul, li,p {
  8.                  margin: 0;
  9.                  padding: 0;
  10.              }
  11.              .ul-li {
  12.                  background-color: deeppink;
  13.                  border: 1px dashed deepskyblue;
  14.                  font-size: 0;
  15.                  list-style: none;
  16.                  margin: 0;
  17.                  padding: 0;
  18.              }
  19.              .ul-li li{
  20.                  /*display: inline-block;*/
  21.                  float: left;
  22.              }
  23.              .ul-li li img {
  24.                  width: 80px;
  25.                  border: 1px dashed #f50447;
  26.              }
  27.              .float {
  28.                  float: left;
  29.              }
  30.              .p_title {
  31.                  font-family: "微软雅黑";
  32.                  font-size: 14px;
  33.                  line-height: 16px;
  34.                  color: #fff;
  35.                  text-align: center;
  36.              }
  37.              .bg_2 {
  38.                  background-color: #00BFFF;
  39.              }
  40.  
  41.              /*清除浮动clearfix*/
  42.              .clearfix:after {
  43.                  display: block;
  44.                  content: "clear";
  45.                  line-height: 0;
  46.                  visibility: hidden;
  47.                  clear: both;
  48.              }
  49.              .clearfix {
  50.                  zoom: 1;
  51.              }
  52.          </style>
  53.      </head>
  54.      <body>
  55.          <ul class="ul-li clearfix">
  56.              <li><img src="img/photo.jpg"/><p class="p_title">海盗船_1</p></li>
  57.              <li><img src="img/photo.jpg"/><p class="p_title">海盗船_2</p></li>
  58.              <li class="bg_2"><img src="img/photo.jpg"/><p class="p_title">海盗船_3</p></li>
  59.              <li><img src="img/photo.jpg"/><p class="p_title">海盗船_4</p></li>
  60.          </ul>
  61.  </div>
  62.      </body>
  63.  </html>

CSS3 float深入理解浮动资料整理的更多相关文章

  1. 对word2vec的理解及资料整理

    对word2vec的理解及资料整理 无他,在网上看到好多对word2vec的介绍,当然也有写的比较认真的,但是自己学习过程中还是看了好多才明白,这里按照自己整理梳理一下资料,形成提纲以便学习. 介绍较 ...

  2. c语言宏定义#define的理解与资料整理

    1. 利用define来定义 数值宏常量 #define 宏定义是个演技非常高超的替身演员,但也会经常耍大牌的,所以我们用它要慎之又慎.它可以出现在代码的任何地方,从本行宏定义开始,以后的代码就就都认 ...

  3. [转]c语言宏定义#define的理解与资料整理

    原文地址:http://www.cnblogs.com/haore147/p/3646934.html 1. 利用define来定义 数值宏常量 #define 宏定义是个演技非常高超的替身演员,但也 ...

  4. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  5. POI3的资料整理

    转自http://aman.cao.blog.163.com/blog/static/32951336201010823557408/ POI3的资料整理一．POI简介 Jakarta POI 是ap ...

  6. MySQL常用指令，java，php程序员，数据库工程师必备。程序员小冰常用资料整理

    MySQL常用指令,java,php程序员,数据库工程师必备.程序员小冰常用资料整理 MySQL常用指令(备查) 最常用的显示命令: 1.显示数据库列表. show databases; 2.显示库中 ...

  7. 理解浮动和position定位

    前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...

  8. 转：基于IOS上MDM技术相关资料整理及汇总

    一.MDM相关知识: MDM (Mobile Device Management ),即移动设备管理.在21世纪的今天,数据是企业宝贵的资产,安全问题更是重中之重,在移动互联网时代,员工个人的设备接入 ...

  9. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

随机推荐

  1. css双飞翼布局

     双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...

  2. iOS-技巧性总结

    1.AFN与ASI对比 -- AFN1. 基于 NSURLConnection & NSURLSession 进行的封装2. 使用简单3. 提供了自动的序列化 & 反序列化支持! AF ...

  3. LINQ系列：LINQ to XML类

    LINQ to XML由System.Xml.Linq namespace实现,该namespace包含处理XML时用到的所有类.在使用LINQ to XML时需要添加System.Xml.Linq. ...

  4. 试试看 ？ 离奇古怪的javascript题目

    来源地址: http://dmitrysoshnikov.com/ecmascript/the-quiz/#q1 另一篇帖子 看看国外的javascript题目,你能全部做对吗? http://www ...

  5. Neutron 如何支持多种 network provider - 每天5分钟玩转 OpenStack（70）

    Neutron 的架构是非常开放的,可以支持多种 network provider,只要遵循一定的设计原则和规范.本节我们将开始讨论这个主题. 先讨论一个简单的场景:在 Neutorn 中使用 lin ...

  6. EntityFramework之摸索EF底层（八）

    前言 此篇文章我将深入去摸索edmx中一些不为人知的东西,有时候我们需要知道Code  First模型中一些存储以及映射的原理,个人觉得那是必要的也是有用的,因为很有可能SQL会出现一些其他问题,只有 ...

  7. golang获取程序运行路径

    golang获取程序运行路径: /* 获取程序运行路径 */ func getCurrentDirectory() string { dir, err := filepath.Abs(filepath ...

  8. ios 静态库冲突的解决办法

    最近在做一个 iOS 的 cocos2d-x 项目接入新浪微博 SDK 的时候被“坑”了,最后终于顺利的解决了.发现网上也有不少人遇到一样的问题,但是能找到的数量有限的解决办法写得都不详细,很难让人理 ...

  9. ios如何在#import方面提升编译性能

    模块的使用非常简单,对于存在的工程,第一件事情就是让这个功能生效.可以在项目的Build Settings 中搜索Modules 找到这个选项,做以下的设置 默认的情况下都是开启的 对于系统自带的只需 ...

  10. DotNet程序集解析

    在.NET Framework框架中,程序集是重用.安全性以及版本控制的最小单元.程序集的定义为:程序集是一个或多个类型定义文件及资源文件的集合.程序集主要包含:PE/COFF,CLR头,元数据,清单 ...