<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             img{

                 float: left;

             }

             p{

                 clear:left;

             }

         </style>

     </head>

     <body>

         <img src="img/logo.png" alt="" />

         <p>您身边的IT培训专家</p>

     </body>

 </html>

回顾:inline-block 特性： 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、标签之间的换行间隙被解析（问题） 5、ie6 ie7不支持块属性标签的inline-block（问题）

float:left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置。 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素 clear:both; 在左右两侧均不允许浮动元素

float的特征：

1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级半层

inline-block的升级float：浮动的更多相关文章

  1. 20190402-display展现、float浮动

    目录 1.display展现 dispaly:"none | block | inline | inline-block | list-item | run-in(主流浏览器不支持) | t ...

  2. 清除float浮动造成影响的几种解决方案

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  3. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  4. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  5. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  6. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  7. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  8. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  9. float浮动深入理解

    [CSS深入理解之float浮动]听课总结 (http://www.imooc.com/learn/121)   1.float的原本作用:为了实现文字环绕 2.float的包裹性和破坏性: 包裹性: ...

  10. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

随机推荐

  1. ReactiveCocoa常用方法

    //1 代替kvo [[self.redView rac_valuesForKeyPath:@"frame" observer:nil] subscribeNext:^(id x) ...

  2. tableview cell添加3D动画

    当cell显示之前,会先调用该方法,因此给cell添加动画,在这个方法里面即可. -(void)tableView:(UITableView *)tableView willDisplayCell:( ...

  3. 第六节，初识python和字符编码

    程序语言的发展 机器语言 程序语言,最初的计算机语言是机器语言,完全是0和1组成的二进制串  如:01010101 11010101 汇编语言 因为01010101的字符串,冗长,不利于维护,所以产生 ...

  4. 关于video.js

    网址:http://www.cnblogs.com/webenh/p/5815741.html

  5. perl-cgi命令行调试

    来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698838.html 参考: http://docstore.mik.ua/orelly/l ...

  6. URL设置问题

    URL设置那里删除了<item path="index.aspx" pattern="index.aspx"/>后,访问首页就不出来了,要加上/in ...

  7. Response.Flush()

    Response.Buffer=True就是在缓存网页 访问网站一般是程序直接输出网页结果,或从缓存中读取网页结果2种方式.两种方式在速度上是有差异的 设置 Response.Buffer = Tru ...

  8. TCP的四次挥手

    由于TCP连接是全双工的,因此每个方向都必须单独进行关闭.这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接.收到一个 FIN只意味着这一方向上没有数据流动, 一个TCP连接 ...

  9. php如何获取本地手机号

    <?php function inquiry_number_infor($phonenumber) /* *传入手机号码,通过API的到xml格式数据,对xml进一步解析,最后返回相应的号码信息 ...

  10. 重启oracle数据库的一次操作命令和alter日志。

    今天重启oracle数据库的命令和alter日志: oracle@NMSSERVER1:~> sqlplus '/as sysdba' SQL*Plus: Release 11.2.0.3.0 ...