div+css中clear用法
一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯。
clear属性值有四个clear:both|left|right|none;
作用:该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。
clear:left;表示该元素左边不存在浮动元素; clear:right;表示该元素右边不存在浮动元素;
clear:both;表示该元素两边都不存浮动元素;
clear:none表示两边允许有浮动元素。
下边是套用网友的一个例子
clear:both;
有css定义: p.f1{float:left;width :100px;} p.f2{float:left;width :400px;}
则: <p class="f1">这个是第1项 </p> <p class="f2">这个是第2项 </p> <p >另起一行</p>
以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档 流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清 除。
所以我们应改为:
如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起 所以我们在第3个<P>加一个清除浮动。 <p class="f1">这个是第1项 </p> <p class="f2">这个是第2项 </p> <p style="clear:both;">另起一行</p>
div+css中clear用法的更多相关文章
- div css float布局用法
float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- DIV+CSS 中的 overflow:hidden
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...
- 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- DIV+CSS中的滤镜和模糊
在div+css中,经常会用到div和span 当内容比较多的时候,会用到div 当内容比较少的时候,会用到span 来看下面的代码: <!DOCTYPE html> <html&g ...
- css中clear属性的认识
今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both. 然后去W3C文档里和百度补脑了一下,总结如下: 这是之前我写的一段测试代码: <div style=&qu ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- DIV+CSS中标签dl dt dd常用的用法
转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...
随机推荐
- NYOJ之题目325 zb的生日
-------------------------------------- 刷一辈子水题... AC代码: import java.util.Scanner; public class Main { ...
- hdu 1241 Oil Deposits
#include<cstdio> #include<iostream> #include<algorithm> #include<math.h> #in ...
- CentOS安装gitLab服务器
首先利用gitlab-install-el6.sh安装,比较简单: (出处:http://www.linuxidc.com/Linux/2013-06/85754.htm) 1:如果有条件,提供一台全 ...
- Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId
针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...
- Datazen介绍
Datazen是移动端全平台的图表解决方案,基于HTML5的应用,实现了全平台的整合.此篇主要对其功能进行大体介绍. 这个平台最近刚被微软收购,相信微软看重的是其HTML5在全移动端平台的实现.Dat ...
- 【转】C# 控件的自定义拖动、改变大小方法
在用VS的窗体设计器时,我们可以发现控件都是可以拖动的,并且还可以调整大小.怎么在自己的程序中可以使用上述功能呢? 下面的方法值得借鉴! using System; using System.Wind ...
- 深入理解ConcurrentMap.putIfAbsent(key,value) 用法
转自:http://blog.csdn.net/exceptional_derek/article/details/40384659 先看一段代码: public class Locale { pri ...
- EditText取消自动调用键盘事件(方法之一)
直接上代码,这只是其中一种方法: 重点在于是在该EditText的父空间中设置 <LinearLayout android:layout_width="match_parent&quo ...
- Greenplum安装
最近需要安装Greenplum测试一些东西,在安装过程中出现了许多问题,所以在这里将安装过程整理一下,主要参考<Greenplum企业应用实践>和http://jxzhfei.blog.5 ...
- iOS路径沙盒文件管理(转载)
iOS路径沙盒文件管理,看到博主总结的很好,转载过来,原文:http://www.aichengxu.com/view/35264 一.iOS中的沙盒机制 iOS应用程序只能对自己创建的文件系统读取文 ...