css清除浮动的处理方法
根据《精彩绝伦的css》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.news{
outline:1px solid pink
}
.col{
float: left;
width:33%;
outline:1px solid blue;
}
</style>
</head>
<body>
<div class="news">
<div class='col one'><p>some text-one</p></div>
<div class='col two'><p>ConHugeCo has permanently altered the theory of niches. What do we morph? Anything and everything, regardless of namelessness!</p></div>
<div class='col three'><p>some text-three</p></div>
</div>
</body>
</html>//这里出现的为图<1>
清除浮动的方法:
- 以溢出遏制浮动 --最终展示效果图<2>
.news{
Overflow : auto;
}
好处:简单
劣势:浏览器自动回添加滚动条
2.以浮动遏制浮动 --出现的问题图<3>
.news{
Float: left;
}
劣势:浮动层的宽度不定,后面的元素会受到这个元素的影响
<div class=’ news >…</div>
<div id=’footer’>2015 comany</div>
出现这个问题:
解决办法:
.footer{
Clear : both;
}
Width:100% //解决宽度不定,不能用auto,div层是浮动层
3. 清除浮动 --图<4>
<div class=’ news >
….
<br>
<p> 2015 company</p>
</div>
添加<br>
br{
Clear : both;
}
4.相邻清除
上面那个例子还有个解决办法
.col.three + *{ clear:both;
}
css清除浮动的处理方法的更多相关文章
- CSS清除浮动八种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...
- css清除浮动的八大方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- CSS清除浮动8大方法
CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门的前端工程师感到头疼的问题, 下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案. 在用D ...
- css清除浮动的集中方法
一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...
- 基础总结(01)--css清除浮动几种方法
1.父元素添加overflow:auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; displ ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- css清除浮动大全共8种方法
原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
随机推荐
- So easy Webservice 2.WebService介绍
WebService概念介绍: Web Service是一项新技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实 ...
- 解析PHP中的file_get_contents获取远程页面乱码的问题【转】
在工作中,遇到一个问题.我需要将一个网址(该网址是一个json数据的接口,即 打开该网址,在浏览器中显示的是json数据),我使用file_get_contents($url),数据是乱码的. 通过查 ...
- PL/SQL 听课笔记
PL/SQL: 知识回顾: SQL: 结构化查询语言: T-SQL: microsoft sql语言: PL/SQL: Oracle sql语言: 变量命名规则: 1.首字母必须是字母,可以包含字 ...
- MIRO发票校验BAPI_INCOMINGINVOICE_CREATE (2013-01-23 10:01:29)
form frm_invoice_create2 . data: str type string. data: ls_headerdata like bapi_incinv_creat ...
- MonkeyRunner学习(1)测试连接
前期的环境搭建详见:http://www.cnblogs.com/peng-lan/p/5388488.html 1.打开模拟器 打开模拟器有两种方法,正常的在eclipse 中启动就不介绍了 另一种 ...
- JavaWeb学习总结(十四)--Apache的DBUtils
一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...
- UIButton(在代码中使用)
- (void)viewDidLoad { [super viewDidLoad]; // 1.1 创建按钮对象 // UIButton *button = [[UIButton alloc] ini ...
- Java编程思想笔记
打好java基础 后续会增加相应基础笔试题 目录如下 1 对象导论2 一切都是对象3 操作符4 控制执行流程5 初始化与清理6 访问控制权限7 复用类8 多态9 接口10 内部类11 持有对象12 通 ...
- 让Fiddler能够检测到localhost的http数据
用 vs.net开发调试网站程序时经常有这样的地址: http://localhost:2033/ 然而在开启 Fiddler 后会发现Fiddler 完全抓不到任何封包. 主要的原因是因为 Fidd ...
- 【linux命令】:查看当前登录用户的信息,本文介绍3种方法
作为系统管理员,你可能经常会(在某个时候)需要查看系统中有哪些用户正在活动.有些时候,你甚至需要知道他(她)们正在做什么.本文为我们总结了4种查看系统用户信息(通过编号(ID))的方法. 1. 使用w ...