css中clear属性的认识
今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both。
然后去W3C文档里和百度补脑了一下,总结如下:
这是之前我写的一段测试代码:
<div style="height: auto;">
<div id="map"></div>
<div style="float: left;width: 50%">
<div id="searchResult"> </div>
</div>
</div>
<div id="lonlatDiv">Lon and Lat is : <span id="text"></span></div>
其中map的DIV是float为left的,我期待的效果是map的div和searchResult的div在一行,而lonlatDiv在下一行,结果确出乎意料的初夏如下结果:
lonlatDiv居然跟上面的DIV到一行去了,这肯定不是我想要的结果,
解决方案(2选1)是:
<div style="height: auto;">
<div id="map"></div>
<div style="float: left;width: 50%">
<div id="searchResult"> </div>
</div>
<div style="clear: both;"></div> <!-- 这里加个空白的div -->
</div>
<!-- lonlatDiv的style里加上clear: both; -->
<div id="lonlatDiv">Lon and Lat is : <span id="text"></span></div>
clear的值有:
clear:left; /*表示该元素左边不存在浮动元素 */
clear:right; /*表示该元素右边不存在浮动元素 */
clear:both; /*表示该元素两边都不存浮动元素 */
clear:none /*表示两边允许有浮动元素 */
css中clear属性的认识的更多相关文章
- CSS中clear属性的both、left和right浅析
前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮 ...
- 详解CSS中clear属性both、left、right值的含义
前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度"清除浮动",导致中间有点小误会.后来我按照他写的DEMO,发现我自己也没完全理解clear: ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中 Zoom属性
CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- CSS中float属性和clear属性的一些笔记
在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
随机推荐
- list C++实现
模仿STL中list,实现了其大部分功能.list可以高效地利用内存资源,常数时间的插入删除操作.并且,list除了erase外,不怎么存在迭代器失效的现象. #include<iostream ...
- C# string byte[] Base64 常用互相转换
参考: http://www.cnblogs.com/zxx193/p/3605238.html?utm_source=tuicool http://www.cnblogs.com/freeliver ...
- nyoj 164&&poj2084 Game of Connections 【卡特兰】
题意:将1~2n个数依照顺时针排列好.用一条线将两个数字连接起来要求:线之间不能有交点.同一个点仅仅同意被连一次. 最后问给出一个n,有多少种方式满足条件. 分析: ans[n]表示n的中的种类数. ...
- MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple
从控制器传递多个Model到视图,可以通过ViewData, ViewBag, PartialView, TempData, ViewModel,Tuple等,本篇逐一体验.本篇源码在github. ...
- 安装arcgis10.5不能启动服务的解决方案转
柚子的二分口粮地 来自:http://www.cnblogs.com/youzi-xuchongyou/p/7218422.html 安装arcgis10.5不能启动服务的解决方案 最近由于公司需要, ...
- linux 监控CPU 内存情况
htop
- [Android UI] Activity Maintheme (Android 解决程序启动时的黑屏问题)
<style name="MainTheme" parent="@android:style/Theme"> <item name=" ...
- iOS:UIView视图与组件控件
一.UIView常见属性 (1)@property(nonatomic,readonly)UIView *superview; //获取自己的父控件对象 (2)@property(nonatomi ...
- 附4 springboot源码解析-run()
public ConfigurableApplicationContext run(String... args) { StopWatch stopWatch = new StopWatch(); / ...
- BigDecimal 小数 浮点数 精度 财务计算
简介 float和double类型的使用局限: 单精度浮点型变量float可以处理6~7位有效数,双精度浮点型变量double可以处理15~16位有效数,在实际应用中,如果需要对更大或者更小的数进行运 ...