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属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...
随机推荐
- arcgis python添加几何属性
import arcpy import numpy import math def AddGeometryAttributes(fc, geomProperties, lUnit, aUnit, cs ...
- Extjs GridPanel 监听事件 行选中背景
Extjs设置GridPanel选中行背景色和选中单元格背景色 var view = grid.getView(); view.getRow(index).style.backgroundColor ...
- pytest文档25-conftest.py作用范围
前言 一个测试工程下是可以有多个conftest.py的文件,一般在工程根目录放一个conftest.py起到全局作用. 在不同的测试子目录也可以放conftest.py,作用范围只在该层级以及以下目 ...
- java中ant包中的org.apache.tools.zip实现压缩和解压缩
其实apache中的ant包(请自行GOOGLE之ant.jar)中有一个更好的类,已经支持中文了,我们就不重复制造轮子了,拿来用吧,这里最主要的功能是实现了 可以指定多个文件 到同一个压缩包的功能 ...
- [翻译] AsyncImageView 异步下载图片
AsyncImageView https://github.com/nicklockwood/AsyncImageView AsyncImageView is a simple extension ...
- struts2 iterator 迭代标签只显示前五条记录
<s:iterator value="#session.produceLists" var="produce" begin="0" e ...
- java表格 JTable实例 (带滚动条,内嵌选择框)
import javax.swing.JTable; import javax.swing.table.AbstractTableModel; import javax.swing.JScrollPa ...
- Linux下分割、合并PDF(pdftk),用于Linux系统的6款最佳PDF页面裁剪工具
Linux下分割.合并PDF(pdftk),用于Linux系统的6款最佳PDF页面裁剪工具 Linux下分割.合并PDF(pdftk) pdftk http://www.pdflabs.com/doc ...
- Java多媒体编程应用
1. 声音文件的播放 1.1 在Applet中播放声音 在Applet中,可以使用AudioClip来播放声音,它非常简单,只有三个方法:play().loop()和stop(). 例1.1 利用Au ...
- 第十五章 springboot + pojo默认值设置
我们有时需要给POJO设置默认值 pojo设置(推荐) 1.User package com.xxx.firstboot.domain; import lombok.Getter; import lo ...