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: ...
随机推荐
- MFC- OnIdle空闲处理
CWinApp::OnIdlevirtual BOOL OnIdle( LONG lCount );返回值: 如果要接收更多的空闲处理时间,则返回非零值:如果不需要更多的空闲时间则返回0.参数: lC ...
- C# Arcgis Engine 获得鼠标按下位置的要素
public IFeature GetFeatureOnMouseDown(IPoint point) { try { ILayer layer = Common.GetLayerByName(mMa ...
- WebView的截屏实现
WebView的截屏主要有两种实现方式: 方式1: bitmap = webView.getDrawingCache(); 可是,webView必需要mWebView.setDrawingCacheE ...
- RvmTranslator6.4 is released
RvmTranslator6.4 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...
- Elasticsearch之marvel（集群管理、监控）插件安装之后的浏览详解
前提 Elasticsearch之插件介绍及安装 https://i.cnblogs.com/posts?categoryid=950999&page=2 (强烈建议,从头开始看) 比如,我 ...
- Log4Net 用法记录
https://www.cnblogs.com/lzrabbit/archive/2012/03/23/2413180.html https://blog.csdn.net/guyswj/articl ...
- qrcode length overflow 生成二维码网址长度溢出解决办法
QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canva ...
- wget---从指定的URL下载文件
wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败,wget会不断的尝试,直到整个文件下载完毕.如果是服务器打断下 ...
- groupadd---创建一个新的工作组
groupadd命令 groupadd命令用于创建一个新的工作组,新工作组的信息将被添加到系统文件中. 语法 groupadd(选项)(参数) 选项 -g:指定新建工作组的id: -r:创建系统工 ...
- 【hihocoder 1122】二分图二•二分图最大匹配之匈牙利算法
[Link]:https://hihocoder.com/problemset/problem/1122 [Description] [Solution] 二分图匹配,匈牙利算法模板题; 这里我先把染 ...