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

CSS 浮动

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

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

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

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

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

文本围绕图片源代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>浮动之文本围绕图片</title>

         <style>

             .box img {

                 width: 80px;

                 border: 1px dashed #f50447;

                 float: left;

             }

             .box p {

                 background-color: #00BFFF;

             }

         </style>

     </head>

     <body>

         <div class="box">

             <img src="img/photo.jpg"/>

             <p>在今天，有不懂的知识，我们都会上网搜一下，但这只是最简单的搜索方法，属于搜索的初级阶段。那搜索的高级阶段是什么呢？最近，科学作家万维钢在新书《智识分子》里介绍了一个概念，叫“信息极客”，他们不仅在网上查找信息，而且还想为社会创造价值，甚至想用信息左右公共政策。想要成为这样的人，你就要会三个高级功夫。

             第一个功夫，是阅读学术论文。<br/>

             第二个功夫，是直接阅读原始数据。<br/>

             第三个功夫，是主动采集和分析数据。那些大数据咱们采集不了，可以从自己的数据开始，也就是量化自我。<br>

             </p>

         </div>

     </body>

 </html>

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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>深入学习浮动浮动清除</title>

         <style>

             body, img, ul, li,p {

                 margin: 0;

                 padding: 0;

             }

             .ul-li {

                 background-color: deeppink;

                 border: 1px dashed deepskyblue;

                 font-size: 0;

                 list-style: none;

                 margin: 0;

                 padding: 0;

             }

             .ul-li li{

                 /*display: inline-block;*/

                 float: left;

             }

             .ul-li li img {

                 width: 80px;

                 border: 1px dashed #f50447;

             }

             .float {

                 float: left;

             }

             .p_title {

                 font-family: "微软雅黑";

                 font-size: 14px;

                 line-height: 16px;

                 color: #fff;

                 text-align: center;

             }

             .bg_2 {

                 background-color: #00BFFF;

             }

             /*清除浮动clearfix*/

             .clearfix:after {

                 display: block;

                 content: "clear";

                 line-height: 0;

                 visibility: hidden;

                 clear: both;

             }

             .clearfix {

                 zoom: 1;

             }

         </style>

     </head>

     <body>

         <ul class="ul-li clearfix">

             <li><img src="img/photo.jpg"/><p class="p_title">海盗船_1</p></li>

             <li><img src="img/photo.jpg"/><p class="p_title">海盗船_2</p></li>

             <li class="bg_2"><img src="img/photo.jpg"/><p class="p_title">海盗船_3</p></li>

             <li><img src="img/photo.jpg"/><p class="p_title">海盗船_4</p></li>

         </ul>

 </div>

     </body>

 </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. DataGrid中的事件和方法

    事件: onLoadSuccess:数据加载成功的时候触发. onLoadError:在载入远程数据产生错误的时候触发. onClickCell:在用户点击一个单元格的时候触发. onDblClick ...

  2. java后台搭建学习计划

    1. 使用maven管理java项目 2.linux安装mysql 3.linux安装redis 4. mybatis使用demo 5. cannal使用demo 6. 用spring4开发rest应 ...

  3. 把DATATABLE,DS中的内容用HTML的方式显示

    前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...

  4. linux管理进程的链表

    linux2.6.11的内核中,为了方便管理linux的进程,主要建了5种linux链表.每个链表节点之间的互联有两种方式,一种是hash节点之间的互联,通过hlist_node的数据结构来实现:另一 ...

  5. linux下的常用命令

    1 fg切换前后台作业 将后台作业转换为前台作业,”fg %作业号“ 2 stty改变和打印终端行设置 tostop 阻止后台作业写终端,stty -a显示终端的所有选项 3 uname查看机子信息 ...

  6. 对来自于Azure的远程连接文件（.rdp）的另一种更便捷的自定义方法

    在上一篇日志中(很抱歉那张比较黑的截图)介绍了如何获得Azure中的Windows虚拟机的远程连接文件,以及一种基于文本编辑方式进行自定义的方法. 实际上对于在Windows下的用户来说,我们可以使用 ...

  7. Hammer.js分析（四）——recognizer.js

    不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. ...

  8. Cookbook of QUnit

    本篇文章是QUnit的简介,可以作为很好的入门教程.文章原址 介绍 自动化测试时软件开发过程中必不可少的一部分,而单元测试则是自动化测试的最为基本的一块,软件的每一个组件, 每一个功能单元都需要经过不 ...

  9. 相克军_Oracle体系_随堂笔记002-基础

    1.常见的Oracle生产库环境: 图2-1可以说是标准的生产库环境,处处体现了冗余,有效防止了单点故障.这就是HA(高可用) 而且冗在某种条件下还可以去掉,平常实现同时运行提供服务,如果一台坏掉,另 ...

  10. 关于WebGIS开源解决方案的探讨

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 公司目前的多数项目采用的是ArcGIS产品+Oracle+W ...