DIV+CSS区块框浮动设计
在页面布局的时候，能够用绝对定位来实现，可是因为调整某个区块框时其它区块的位置不会对应的改变，所以这并非布局的首选方式。可是使用浮动的区块框能够向左或向右移动，直到它的外边缘碰到包括它区块的边框或还有一个浮动狂的边框为止。
而且因为浮动框不在文档的普通流中，所以文档的普通流中的区块框表现的像就浮动框不存在一样。
这篇文章就总结几种简单的区块框浮动的样例：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
1.不浮动区块框排序
<html>
<head>
<title>DIV+CSS</title>
<style>
body{
margin:0px;
}
div{
width:200px;
height:200px;
font-size:40px;
text-align:center;
}
#one{
background:red;
}
#two{
background:green;
}
#three{
background:yellow;
}
</style>
</head> <body>
<div id="one">
框（1）
</div>
<div id="two">
框（2）
</div>
<div id="three">
框（3）
</div>
</body>
</html>
2.将第一区块框向右浮动
又一次定义#one选择器，仅仅须要加入一行代码：
#one{
float:right;
background:red;
}
执行结果例如以下：
3.设置第一个向左浮动
为了能让大家看出效果，必需要调整三个区块的大小。所以直接又一次写代码了。
<html>
<head>
<title>DIV+CSS</title>
<style>
body{
margin:0px;
}
div{
height:200px;
font-size:40px;
text-align:center;
}
#one{
width:200px;
float:left;
background:red;
}
#two{
width:240px;
background:green;
}
#three{
width:200px;
background:yellow;
}
</style>
</head> <body>
<div id="one">
框（1）
</div>
<div id="two">
框（2）
</div>
<div id="three">
框（3）
</div>
</body>
</html>
执行结果：
不难看出。框（2）被框（1）给覆盖了。
仅仅有多出来的40px的宽度能看见。
由于框（1）浮动之后，就不属于文档流范围，相当于它原先的位置空了出来，所以框（2）自然就补了上去。
4.设置三个框都向左浮动
这个仅仅须要在例1中的div{ }中加一句代码：
float:left;
执行效果：
5.设置三个框向左（空间不足）
仅仅须要对应的改动三个区块的大小就可以
<html>
<head>
<title>DIV+CSS</title>
<style>
body{
margin:0px;
}
div{
float:left; height:200px;
font-size:40px;
text-align:center;
}
#one{
width:500px;
background-color:red;
}
#two{
width:400px;
background:green;
}
#three{
width:600px;
background:yellow;
}
</style>
</head> <body>
<div id="one">
框（1）
</div>
<div id="two">
框（2）
</div>
<div id="three">
框（3）
</div>
</body>
</html>
执行结果：
空间不足的话，区块就自己主动下移了
6.第三个区块被第一个“卡住”
区块3在上面没有足够的空间，下移的时候。区块1多出的部分会自己主动阻挡区块3的移动。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">最后再介绍一个属性：clear（清除属性，指定一个元素是否同意有元素漂浮在它的旁边）
clear:none;
clear:left;
clear:right;
clear:both;
一共同拥有这么几种值，分别相应不同的清除效果。灵活使用这个属性，非常多的问题都能简单解决。
DIV+CSS区块框浮动设计的更多相关文章
- 17 ， CSS 区块、浮动、定位、溢出、滚动条
1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用 属性名称 属性值 说明 width ...
- div+css之清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...
- CSS区块、浮动、定位、溢出、滚动条
CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称 属性值 ...
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- 纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
- DIV+CSS设计时浏览器兼容性
近期用Div+css做了个企业网站,在浏览器中测试的时候确发现在IE7中显示正常的页面,在ie6中非常混乱,当时第一感觉就想到了兼容问题,可是百思不得其解应该从哪下手,经过一两天的查资料, ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- 使用Div+CSS布局设计网站的优点
网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div ...
随机推荐
- PHP实现中文字串截取无乱码的方法
直接使用PHP函数substr截取中文字符可能会出现乱码,主要是substr可能硬生生的将一个中文字符“锯”成两半.解决办法: 1.使用mbstring扩展库的mb_substr截取就不会出现乱码了. ...
- [CSS]float&clear浮动
CSS float 属性 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 可取的值 ...
- execute、executeUpdate、executeQuery三者的区别及返回值
一.boolean execute(String sql)允许执行查询语句.更新语句.DDL语句.返回值为true时,表示执行的是查询语句,可以通过getResultSet方法获取结果:返回值为fal ...
- Django 1
Django 1.10文档中文版Part1 本文是博主翻译的Django1.10版本官方文档的第一部分,如时间充裕,争取一直翻译下去,经验不足,或有错漏,敬请指正.另外对于公开文档进行翻译的版权问题不 ...
- iOS应用如何支持IPV6-b
果然是苹果打个哈欠,iOS行业内就得起一次风暴呀.自从5月初Apple明文规定所有开发者在6月1号以后提交新版本需要支持IPV6-Only的网络,大家便开始热火朝天的研究如何支持IPV6,以及应用中哪 ...
- MySQL驱动阅读------executeQuery查询的过程，基于JDBC-----5.1.26
Statement statement = connection.createStatement(); final ResultSet resultSet = statement.executeQue ...
- nutch 采集效率问题
http://hi.baidu.com/jacklin/item/a8fbccf479f6a1d042c36a7c再附一篇:http://blog.csdn.net/laigood/article/d ...
- js 作用域，变量提升
先看下面一段代码: 代码执行的结果是: 1st alert : a = 0 2nd alert : a = undefined 5th alert : a = 0 3rd alert : a = 3 ...
- German Collegiate Programming Contest 2013:E
数值计算: 这种积分的计算方法很好,学习一下! 代码: #include <iostream> #include <cmath> using namespace std; ; ...
- c++ RAII 资源管理就是初始化
RAII:(Resource Acquisition Is Initialization),也就是“资源获取就是初始化”,是C++语言的一种管理资源.避免泄漏的惯用法.C++标准保证任何情况下,已构造 ...