inline-block的升级float:浮动
<!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:浮动的更多相关文章
- 20190402-display展现、float浮动
目录 1.display展现 dispaly:"none | block | inline | inline-block | list-item | run-in(主流浏览器不支持) | t ...
- 清除float浮动造成影响的几种解决方案
1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- css之float(浮动)的特性
详解CSS float属性 float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- float浮动问题:会造成父级元素高度坍塌;
float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- float浮动深入理解
[CSS深入理解之float浮动]听课总结 (http://www.imooc.com/learn/121) 1.float的原本作用:为了实现文字环绕 2.float的包裹性和破坏性: 包裹性: ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
随机推荐
- php文件去重复,二维数组筛选
http://www.porter.com/fr/fr/product/648162|Sneakershttp://www.porter.com/fr/fr/product/642115|Bootsh ...
- Chapter 2 Open Book——7
I gunned my deafening engine to life, ignoring the heads that turned inmy direction, and backed care ...
- 第三十节,正则表达式re模块
正则表达式 正则表达式本身是一种小型的.高度专业化的编程语言,而在python中,通过内嵌集成re模块,程序员们可以直接调用来实现正则匹配.正则表达式模式被编译成一系列的字节码,然后由用C编写的匹配引 ...
- CSS3秘笈:第二章
1.一个样式由两个元素组成:浏览器对其设置格式的网页元素(选择器,selector)和实际的格式化指令(声明块,declaration block). 2.简单的样式也包含了以下几个元素: (1)Se ...
- AC Me
AC Me Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submiss ...
- sql server基础学习之引号
create table #(code varchar(20),value int)declare @sql varchar(200) set @sql='insert into # select ' ...
- ado vb6
http://www.cnblogs.com/ywb-lv/articles/2343444.html http://stackoverflow.com/questions/3334102/use-t ...
- Java 中的四种引用及垃圾回收策略
Java 中有四种引用:强引用.软引用.弱引用.虚引用: 其主要区别在于垃圾回收时是否进行回收: 1.强引用 使用最普遍的引用.如果一个对象具有强引用,那就 类似于必不可少的生活用品,垃圾回收器绝不会 ...
- 上海赛趣-top.mainFrame.tabAddHandler方法详解
top.mainFrame.tabAddHandler("item"+Id,'项目:'+itemname,'<%=basePath%>bizitem/goEditIte ...
- dsplay:table页面合并表格
在实际项目中经常会遇到合并表格的情形,现在我将自己合并的方法写出来,供大家教参一下,顺便自己也作个备忘. <%@ page language="java" contentTy ...