clear属性来取消浮动
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
例子:
没用clear的情况下
<style>
.c1{
width: 500px;
background-color:#000;
border:1px solid #F00;
padding:10px;
}
.c1_left,.c1_right{
width:200px;
height:150px;
border:1px solid #FFF;
background-color: #999;
}
.c1_left{
float: left;
}
.c1_right{
float:right;
}
</style>
<body>
<div class="c1">
<div class="c1_left">float left</div>
<div class="c1_right">float right</div>
</div>
</body>
这样就达不到我们预期的效果
加clear:both清除浮动
<style>
.c1{
width: 500px;
background-color:#000;
border:1px solid #F00;
padding:10px;
}
.c1_left,.c1_right{
width:200px;
height:150px;
border:1px solid #FFF;
background-color: #999;
}
.c1_left{
float: left;
}
.c1_right{
float:right;
}
.clear{
clear:both;
}
</style>
<body>
<div class="c1">
<div class="c1_left">float left</div>
<div class="c1_right">float right</div>
<div class="clear"></div>
</div>
</body>
....
clear属性来取消浮动的更多相关文章
- CSS 清除浮动 clear 属性
CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...
- clear属性
clear:规定元素的哪一侧不允许其他浮动元素. clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上 ...
- css之clear属性
clear属性用来设置元素左右两边是否可以存在浮动元素. 它的值包括:left,right,both,none.其中none代表左右两边可以出现浮动元素.
- CSS的clear属性
以下引用自w3school clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的.在 CS ...
- clear 属性
clear属性:规定元素的哪一侧不允许有其他的浮动元素 Example: <html> <head> <style type="text/css"&g ...
- CSS中clear属性的both、left和right浅析
前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...
- CSS基础（float属性与清除浮动）
3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left | right | none 特点: 浮动的元素不占位置,脱离了标准文档流 ...
- HMLT clear 属性
原文 : http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/ clear 的四个值 ...
- 详解CSS中clear属性both、left、right值的含义
前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度"清除浮动",导致中间有点小误会.后来我按照他写的DEMO,发现我自己也没完全理解clear: ...
随机推荐
- 从零開始的Android新项目7 - Data Binding入门篇
Data Binding自从去年的Google I/O公布到至今,也有近一年的时间了.这一年来,从Beta到如今比較完好的版本号.从Android Studio 1.3到如今2.1.2的支持,能够说D ...
- 在XEN上启动guest时loopback设备不足
现象: 通常出现在用户挂载了多个img到guest上,会发现无法再创建guest或者无法启动guest的现象. /var/log/xen/xen-hot-plug.log中错误如下: xenstore ...
- Uva 10081 Tight words （概率DP）
Time limit: 3.000 seconds Given is an alphabet {0, 1, ... , k}, 0 <= k <= 9 . We say that a wo ...
- 云服务器查看外网ip
curl ip.6655.com/ip.aspx curl whatismyip.akamai.com wget -qO - ifconfig.co curl icanhazip.com dig +s ...
- Python day2 知识回顾
标准库一般放在lib,site-packages放自己下载的:起的py文件名称不要和模块名字相同:import sys#print(sys.path)#打印去哪里寻找这些模块的路径#print(sys ...
- 手机浏览器,微信浏览器对background-color不显示的问题
PC上的浏览器可以正常显示,但是到了手机上就不显示了,古怪的问题花了我一晚上都没解决. 今天突然想到会不会是某些特立独行的了浏览器为了彰显个性,采用不同别人的解析方式呢? 我的原来CSS是这么写的: ...
- Oracle与MySQL的转化差异
1.nvl函数. Oracle 中 : nvl (join_count , 0) MySQL中:if(join_count is null,'0',join_count) ...
- Trafodion:Transactional SQL on HBase
Trafodion: Transactional SQL on HBase HBase上实时分布式事务处理 介绍 HBase的SQL能力一直不足.Phoenix缺乏Join能力,eBay提出的kyli ...
- ABAP调用外部WebService
TCode:se80 选择 Package,输入我们自己的开发包,后回车 右击 开发包名称,选择菜单 出现创建向导窗体 选择"Service Consumer",点击 继续 选择& ...
- ajax同时请求多个服务器？
这是地址, http://119.29.23.116/info.php 大侠你怎么看 想利用雅黑探针检测服务器的在线状态,但对AJAX多个请求不会操作 header('Access-Control-A ...